Заполнитель изображения - PullRequest
Новая
       1

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

18 голосов
/ 24 января 2012

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

Я не хочу делать страницугромоздкий, добавив jquery или любой фреймворк, также я не могу добавить любой тип div к изображениям, потому что сайт почти готов.

Нашел ответ только с помощью javascript 

function ImgError(source){
source.src = "/images/noimage.gif";
source.onerror = "";
return true;
}

<img src="someimage.png" onerror="ImgError(this);"/>

Ответы [ 7 ]

54 голосов
/ 24 января 2012

вы можете скрыть, используя следующее: 

<img
  src="my.png"
  onerror="this.style.display='none'"
/>

вы можете отобразить другое изображение, если изображение не найдено следующим образом: 

<img src="my.png" onerror="this.src = 'image-not-found.png';" />
6 голосов
/ 11 февраля 2013

Решение с 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);"/>
4 голосов
/ 24 января 2012

Простым решением было бы использование буквально пустого изображения.Обычно это используется для спрайтов, но я думаю, что вы также можете использовать это.

Что вы делаете, вы создаете пустое gif-изображение размером 1x1 px с включенной прозрачностью, направляете атрибут «src» на blank.gifи передайте изображения через свойство css background-image.Поэтому, даже если фоновое изображение не найдено, оно не будет отображать изображение неработающей ссылки.

1 голос
/ 24 января 2012

Браузер делает эту иконку с разбитым изображением. Это не то, что вы можете изменить в коде. Я думаю, вы обнаружите, что разные браузеры по-разному обрабатывают пропущенные изображения.

То, что вы хотите сделать, можно обработать по-другому, хотя ...

Style: 

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 должны соответствовать ширине и высоте изображения.

1 голос
/ 24 января 2012

Это особенность некоторых браузеров - насколько я помню, Firefox, Chrome и Safari ничего не показывают, в то время как Internet Explorer показывает значок с разбитым изображением.Если не считать Javascript, я не верю, что вы можете изменить это поведение.

0 голосов
/ 10 августа 2017

Попробуйте this.remove () , чтобы удалить заполнитель разорванного изображения: 

<div class="cell">
  <p>
    <img src="pic.png" onerror="this.remove();" />
  </p>
</div>

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

0 голосов
/ 24 января 2012

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

1) Используйте JavaScript, чтобы добавить обработчик onerror к изображению, которое скрывает его, когда его не удается загрузить, путем настройки его на скрытый с помощью css (вам нужно иметь содержащий divчтобы применить цвет фона, так как цвет фона не будет отображаться, если изображение выделено).

Чтобы применить обработчик ошибок к каждому изображению на сайте без jQuery и без изменения кода, вы можете сделать это(поместите это в скрипт в конце страницы - он не будет работать, если он находится в <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).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...