it-swarm.com.ru

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

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

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

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

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

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

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

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

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

<img src="my.png" onerror="this.src = 'image-not-found.png';" />
53
Hemant Metalia

Решение с 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);"/>
6
Dmitry Skorinko

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

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

4
Ege

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

1
MassivePenguin

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

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

Стиль:

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
user166560

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

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

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

0
MannyC

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

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).

0
Nick Lockwood