Обратное изображение с CSS

Question

У меня есть <img>, который показывает удаленное изображение. Я хочу, чтобы он был откат к другому локальному изображению, в случае, когда удаленный недоступен.

<img class="cc_image fallback" src="http://www.iconarchive.com/download/i82888/limav/flat-gradient-social/Creative-Commons.ico"> 

.cc_image { 
    width: 256px; 
    height: 256px; 
} 

.cc_image.fallback { 
    /* this URL here is theoretically a local one (always reachable) */ 
    background-image: url('https://cdn2.iconfinder.com/data/icons/picons-basic-3/57/basic3-010_creative_commons-256.png'); 
} 

Он работает так, что когда ЦСИ изображение не найден, то фоновое изображение будет показано.

Недостатками являются:

• всегда будет загружаться фоновое изображение (дополнительный запрос HTTP)
• это показывает немного не обретенной-значок (вопросительный знак на сафари) на месте из оригинального изображения, которое отображается над фоновым изображением (не большая проблема, но я бы хотел избавиться от него)

Как я мог решить эти проблемы? Или: есть ли другая техника для достижения того же результата?

Я нашел this question, но данные решения полагаются на Javascript или на <object> (что похоже на работу с Chrome). Я хотел бы получить чистое решение CSS/HTML без Javascript, если это возможно.

Я знаю о нескольких background-image, но не уверен, что это хороший вариант (поддержка браузера? И будет ли он резервным с недостижимым изображением?). Или я думал о вложении SVG-изображения как data-uri.

Рекомендации по наиболее гибкому (и совместимому) методу?

Answer 1

К сожалению, вы не можете достичь обоих без Javascript или тега объекта.

Вы можете сделать это, чтобы избежать значок недостающего изображения:

Поместите изображение в контейнер (это может быть уже в одном). Сделайте контейнер одинаковой ширины и высоты, чем изображение.

1. Установить резервное изображение в качестве фонового изображения контейнера.
2. Установите удаленное изображение в качестве фонового изображения вашего тега img.
3. Загрузите прозрачный PNG размером 1x1 пиксель в качестве src вашего изображения (см. Код, как это можно сделать без дополнительного HTTP-запроса).

Код:

HTML

<!-- you could use any other tag, such as span or a instead of div, see css below --> 
<div class="cc_image_container fallback"> 
    <img class="cc_image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="background-image: url(*your remote image*)"/> 
</div> 

CSS

.fallback { 
    background-image: url(*fallback image here*); 
    display: inline-block; /*to ensure it wraps correctly around the image, even if it is a a or span tag*/ 
    min-width: specify a minimum width (could be the width of the fallback image) px; 
    min-height: specify a minimum height (could be the height of the fallback image) px; 
    background-position: center center; // fallback for older browsers 
    background-size: cover; 
    background-repeat: no-repeat; 
} 

.cc_image { 
    min-width: same as container px; 
    min-height: same as container px; 
    background-position: center center; // fallback for older browsers 
    background-size: cover; 
    background-repeat: no-repeat; 
} 

• min-width и max-width убедитесь, что фоновые изображения остаются видимыми.
• background-position гарантирует, что центральная часть изображений остается видимой и является изящной деградацией старых браузеров
• background-size изменяет фоновое изображение для заполнения фона элемента. Значение cover означает, что изображение будет изменено, чтобы оно полностью покрыло элемент (некоторые из внешних краев изображения могут быть обрезаны)
• Данные base64 в теге img src являются прозрачными 1px png.
• Это будет иметь дополнительное преимущество, которое обычные пользователи и некоторые боты могут не сэкономить ваши изображения (элементарная защита изображений)
• Единственным недостатком является то, что у вас все еще будет один дополнительный HTTP-запрос для резервного изображения ,