Ввод изображения по умолчанию в случае, если атрибут src html <img>недопустим? - PullRequest
Новая
       43

Ввод изображения по умолчанию в случае, если атрибут src html <img>недопустим?

239 голосов
/ 11 июня 2009

Есть ли способ отобразить изображение по умолчанию в теге HTML <img>, если атрибут src недопустим (используется только HTML)? Если нет, то каким был бы ваш легкий способ обойти это?

Ответы [ 21 ]

282 голосов
/ 11 июня 2009

Это хорошо работает для меня. Может быть, вы хотите использовать JQuery для подключения события. 

 <img src="foo.jpg" onerror="if (this.src != 'error.jpg') this.src = 'error.jpg';">

Обновлено с помощью jacquargs error guard

Обновлено: решение только для CSS Недавно я видел Виталий Фридман демо - отличное решение CSS, о котором я не знал. Идея состоит в том, чтобы применить свойство content к поврежденному изображению. Обычно :after или :before не применяются к изображениям, но когда они повреждены, они применяются. 

<img src="nothere.jpg">
<style>
img:before {
    content: ' ';
    display: block;
    position: absolute;
    height: 50px;
    width: 50px;
    background-image: url(ishere.jpg);
</style>

Демо: https://jsfiddle.net/uz2gmh2k/2/

Как показывает скрипка, сломанное изображение само по себе не удаляется, но это, вероятно, решит проблему в большинстве случаев без каких-либо JS и CSS-кодов. Если вам нужно применить разные изображения в разных местах, просто выделите класс: .my-special-case img:before { ...

281 голосов
/ 11 июня 2009

Вы запросили решение HTML только ... 

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>
  <title>Object Test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>

  <p>
    <object data="http://stackoverflow.com/does-not-exist.png" type="image/png">
      <img src="https://appharbor.com/assets/images/stackoverflow-logo.png" alt="example">
    </object>
  </p>

</body>

</html>

Поскольку первое изображение не существует, откроется запасной вариант (логотип Stack Overflow). И если вы используете действительно старый браузер, который не поддерживает object, он просто проигнорирует этот тег и использует тег img. См. caniuse веб-сайт для совместимости. Начиная с 2018 года этот элемент широко поддерживается всеми браузерами из ie6 +.

57 голосов
/ 29 октября 2012

Нашел это решение весной в действии, 3-е изд.

<img src="../resources/images/Image1.jpg" onerror="this.src='../resources/images/none.jpg'" />

Обновление: Это не только HTML решение ... onerror это javascript

15 голосов
/ 11 июня 2009 
<style type="text/css">
img {
   background-image: url('/images/default.png')
}
</style>

Обязательно введите размеры изображения и укажите, хотите ли вы, чтобы изображение было мозаичным или нет.

13 голосов
/ 11 июня 2009

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

fixBrokenImages = function( url ){
    var img = document.getElementsByTagName('img');
    var i=0, l=img.length;
    for(;i<l;i++){
        var t = img[i];
        if(t.naturalWidth === 0){
            //this image is broken
            t.src = url;
        }
    }
}

Используйте это так: 

 window.onload = function() {
    fixBrokenImages('example.com/image.png');
 }

Протестировано в Chrome и Firefox

12 голосов
/ 06 сентября 2014

Если вы используете Angular / jQuery, это может помочь ... 

<img ng-src="{{item.url}}" altSrc="{{item.alt_url}}" onerror="this.src = $(this).attr('altSrc')">

Объяснение

Предполагая, что item имеет свойство url, которое может быть нулевым, в этом случае изображение будет отображаться как разорванное. Это запускает выполнение выражения атрибута onerror, как описано выше. Вам необходимо переопределить атрибут src, как описано выше, но вам потребуется jQuery для доступа к вашему altSrc. Не удалось заставить его работать с ванильным JavaScript.

Может показаться немного хакерским, но спасло день в моем проекте.

11 голосов
/ 02 августа 2016 

<img style="background-image: url(image1), url(image2);"></img>

Используйте фоновое изображение, которое позволяет добавлять несколько изображений. Мое дело: image1 - это основное изображение, оно будет получено из какого-то места (браузер делает запрос) image2 - это локальное изображение по умолчанию, которое отображается во время загрузки изображения image1. Если image1 возвращает какую-либо ошибку, пользователь не увидит никаких изменений, и это будет понятно для пользователя

7 голосов
/ 23 марта 2016

Решение только для HTML, где единственным требованием является то, чтобы вы знали размер вставляемого изображения. Не будет работать с прозрачными изображениями, так как в качестве наполнителя используется background-image.

Мы можем успешно использовать background-image, чтобы связать изображение, которое появляется, если данное изображение отсутствует. Тогда единственной проблемой является сломанное изображение значка - мы можем удалить его, вставив очень большой пустой символ, таким образом выталкивая содержимое за пределы дисплея img. 

img {
  background-image: url("http://placehold.it/200x200");
  overflow: hidden;
}

img:before {
  content: " ";
  font-size: 1000px;
}
This image is missing:
<img src="a.jpg" style="width: 200px; height: 200px"/><br/>
And is displaying the placeholder

Решение только для CSS (только Webkit) 

img:before {
  content: " ";
  font-size: 1000px;
  background-image: url("http://placehold.it/200x200");
  display: block;
  width: 200px;
  height: 200px;
  position: relative;
  z-index: 0;
}
This image is there:
<img src="http://placehold.it/100x100"/><br/>

This image is missing:
<img src="a.jpg"/><br/>
And is displaying the placeholder

Или, на jsfiddle: https://jsfiddle.net/xehndm3u/9/

6 голосов
/ 07 марта 2016

angular2: 

<img src="{{foo.url}}" onerror="this.src='path/to/altimg.png'">
4 голосов
/ 16 июля 2015

Невозможно быть уверенным в бесчисленном количестве клиентов (браузеров), которые будут пытаться просматривать вашу страницу. Одним из аспектов, который следует учитывать, является то, что почтовые клиенты являются дефактными веб-браузерами и могут не обрабатывать такие хитрые махинации ...

Таким образом, вы также должны включить alt / text с ШИРОКОЙ ПО УМОЛЧАНИЮ и ВЫСОКОЙ, как это. Это чисто HTML-решение. 

alt="NO IMAGE" width="800" height="350"

Таким образом, другой хороший ответ будет слегка изменен следующим образом: 

<img src="foo.jpg" onerror="if (this.src != 'error.jpg') this.src = 'error.jpg';" alt="NO IMAGE" width="800" height="350">

У меня были проблемы с тегом объекта в Chrome, но я думаю, что это применимо и к этому.

Вы можете далее стилизовать alt / text как ОЧЕНЬ БОЛЬШОЙ ...

Так что мой ответ - использовать Javascript с хорошим отступлением от alt / text.

Я также нашел это интересным: Как стилизовать атрибут alt изображения

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

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

...