Заполнитель изображений

Я определил тег изображения с цветом фона, чтобы, если нет изображения, цвет должен отображаться, но все же значок сломанного изображения показывает, как его удалить?

Я не хочу делать страницу громоздкой, добавляя 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>

Я использую ячейки для сохранения макета.