Заполнитель изображений
Я определил тег изображения с цветом фона, чтобы, если нет изображения, цвет должен отображаться, но все же значок сломанного изображения показывает, как его удалить?
Я не хочу делать страницу громоздкой, добавляя jquery или любую фреймворк, также я не могу добавлять какие-либо divs к изображениям, потому что сайт почти завершен.
Нашел ответ только с помощью javascript
function ImgError(source){
source.src = "/images/noimage.gif";
source.onerror = "";
return true;
}
<img src="someimage.png" onerror="ImgError(this);"/>
Ответы
Ответ 1
вы можете скрыть это, используя следующее:
<img
src="my.png"
onerror="this.style.display='none'"
/>
вы можете отобразить другое изображение, если изображение не найдено следующим образом:
<img src="my.png" onerror="this.src = 'image-not-found.png';" />
Ответ 2
Решение с 1x1 пустым png
function ImgError(source){
empty1x1png = "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12NgYAAAAAMAASDVlMcAAAAASUVORK5CYII=";
source.src = "data:image/png;base64," + empty1x1png;
source.onerror = "";
return true;
}
<img src="someimage.png" onerror="ImgError(this);"/>
Ответ 3
Простым решением было бы использовать буквальное пустое изображение заполнителя. Обычно это используется для спрайтов, но я думаю, что вы также можете использовать это.
Что вы делаете, вы создаете пустое gif-изображение размером 1x1 px с включенной прозрачностью, нажимаете "src" на атрибут blank.gif и даете изображения через свойство background-image css.
Поэтому, даже если фоновое изображение не найдено, оно не отображает изображение с неработающей связью.
Ответ 4
Это особенность некоторых браузеров - насколько я помню, Firefox, Chrome и Safari ничего не показывают, пока Internet Explorer показывает сломанный значок изображения. Если вы не используете Javascript, я не верю, что вы можете отменить это поведение.
Ответ 5
Браузер делает это сломанное изображение. Это не то, что вы можете изменить в коде. Я думаю, вы обнаружите, что разные браузеры обрабатывают недостающие изображения по-разному.
То, что вы хотите сделать, может обрабатываться по-другому, хотя...
Стиль:
div.image-maybe-missing {
width: 300px;
height: 450px;
background-color: red;
background-image: url("/images/is-it-there.png");
}
HTML:
<div class="image-maybe-missing">
</div>
Это даст вам пустой ящик с красным фоном, если изображение отсутствует. Ширина и высота div должны соответствовать ширине и высоте изображения.
Ответ 6
Это поведение, зависящее от браузера, но вы ничего не можете с этим поделать. Вот несколько вариантов:
1) Используйте JavaScript, чтобы добавить обработчик onerror к изображению, которое скрывает его, когда он не может загрузить с помощью настроек, которые он скрывает с помощью css (вам нужно иметь содержащий div, чтобы применить цвет фона к цвету фона не будет отображаться, если изображение hdden).
Чтобы применить обработчик ошибок к каждому изображению на сайте без jQuery и без изменения кода, вы можете сделать это (поместите это в script в конце страницы - это не сработает, если оно в <head>
, и вы не можете поместить его в window.onload или он не будет запускаться до загрузки изображений).
var images = document.getElementsByTagName('img');
for (i = 0; i < images.length; i++) {
images[i].onerror = function() {
this.style.visibility = 'hidden';
}
}
2) Установите изображение в качестве фонового изображения css в div вместо использования тега <img>
. Он не является семантическим, но не отображает сломанный значок изображения, если он не загружается, и вы все же можете указать цвет фона и метку (а не тег alt).
Ответ 7
Попробуйте this.remove(), чтобы удалить сломанный образчик:
<div class="cell">
<p>
<img src="pic.png" onerror="this.remove();" />
</p>
</div>
Я использую ячейки для сохранения макета.