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

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

192
html image

19 ответов

Вы спрашивали только 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>

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

236

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

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

обновлено с jacquargs error guard

Обновлено: CSS только решение Я недавно видел Виталий Фридман demo отличное решение 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 или gobs CSS. Если вам нужно применить различные изображения в разных местах, просто дифференцировать с классом:.my-special-case img:before { ...

244

нашел это решение весной в действии 3rd Ed.

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

обновление: Это не только HTML-решение... onerror является javascript

44
<style type="text/css">
img {
   background-image: url('/images/default.png')
}
</style>

обязательно введите размеры изображения и хотите ли вы изображение или нет.

14

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

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

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

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

объяснение

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

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

9

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

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

8

только 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: " ";
  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/

4

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

таким образом, вы также должны включить 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 изображения

2

angular2: 

<img src="{{foo.url}}" onerror="this.src='path/to/altimg.png'">
2

простой img-элемент не очень гибкий, поэтому я объединил его с элементом изображения. таким образом, CSS не требуется. при возникновении ошибки все srcset устанавливаются в резервную версию. изображение сломанной ссылки не отображается. он не загружает ненужные версии изображений. картина-элемент поддерживает адаптивный дизайн и несколько других типов, которые не поддерживаются браузером.

<picture>
    <source id="s1" srcset="image1_not_supported_by_browser.webp" type="image/webp">
    <source id="s2" srcset="image2_broken_link.png" type="image/png">
    <img src="image3_fallback.jpg" alt="" onerror="this.onerror=null;document.getElementById('s1').srcset=document.getElementById('s2').srcset=this.src;">
</picture>
2

приведенное выше решение является неполным, он пропустил атрибут src.

this.src и this.attribute('src') не то же самое, первый содержит полную ссылку на изображение, например http://my.host/error.jpg, но атрибут просто сохраняет исходное значение,error.jpg

правильное решение

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

модульная версия с в jQuery добавьте это в конец вашего файла:

<script>
    $(function() {
        $('img[data-src-error]').error(function() {
            var o = $(this);
            var errorSrc = o.attr('data-src-error');

            if (o.attr('src') != errorSrc) {
                o.attr('src', errorSrc);
            }
        });
    });
</script>

и на img tag:

<img src="..." data-src-error="..." />
1

Если вы используете Angular 1.x вы можете включить директиву, которая позволит вам вернуться к любому количеству изображений. Атрибут fallback поддерживает один url-адрес, несколько URL-адресов внутри массива или угловое выражение с использованием данных области:

<img ng-src="myFirstImage.png" fallback="'fallback1.png'" />
<img ng-src="myFirstImage.png" fallback="['fallback1.png', 'fallback2.png']" />
<img ng-src="myFirstImage.png" fallback="myData.arrayOfImagesToFallbackTo" />

добавьте новую резервную директиву в модуль angular app:

angular.module('app.services', [])
    .directive('fallback', ['$parse', function ($parse) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                var errorCount = 0;

                // Hook the image element error event
                angular.element(element).bind('error', function (err) {
                    var expressionFunc = $parse(attrs.fallback),
                        expressionResult,
                        imageUrl;

                    expressionResult = expressionFunc(scope);

                    if (typeof expressionResult === 'string') {
                        // The expression result is a string, use it as a url
                        imageUrl = expressionResult;
                    } else if (typeof expressionResult === 'object' && expressionResult instanceof Array) {
                        // The expression result is an array, grab an item from the array
                        // and use that as the image url
                        imageUrl = expressionResult[errorCount];
                    }

                    // Increment the error count so we can keep track
                    // of how many images we have tried
                    errorCount++;
                    angular.element(element).attr('src', imageUrl);
                });
            }
        };
    }])
1

используя Jquery, вы можете сделать что-то вроде этого:

$(document).ready(function() {
    if ($("img").attr("src") != null)
    {
       if ($("img").attr("src").toString() == "")
       {
            $("img").attr("src", "images/default.jpg");
       }
    }
    else
    {
        $("img").attr("src", "images/default.jpg");
    }
});
0

для любого изображения просто используйте этот код javascript:

if (ptImage.naturalWidth == 0)
    ptImage.src = '../../../../icons/blank.png';

здесь ptImage это <img> адрес тега, полученный document.getElementById().

0

Google выбросил эту страницу на ключевые слова" Image fallback html", но поскольку не из вышеперечисленного мне помогло, и я искал "SVG fallback support for IE below 9", я продолжал поиск, и это то, что я нашел: 

<img src="base-image.svg" alt="picture" />
<!--[if (lte IE 8)|(!IE)]><image src="fallback-image.png" alt="picture" /><![endif]-->

это может быть не по теме, но это решило мою собственную проблему, и это может помочь кому-то еще.

0

кроме Патрик блестящий ответ, для тех из вас, кто ищет кросс-платформенное угловое решение js, вот вы идете:

<object type="image/png" data-ng-attr-data="{{ url || 'data:' }}">
    <!-- any html as a fallback -->
</object>

вот Планк, где я играл, пытаясь найти правильное решение:http://plnkr.co/edit/nL6FQ6kMK33NJeW8DVDY?p=preview

0

хорошо!! Я нашел этот способ удобным, проверьте, что атрибут высоты изображения равен 0, затем вы можете перезаписать атрибут src с изображением по умолчанию: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image

 image.setAttribute('src','../icons/<some_image>.png');
  //check the height attribute.. if image is available then by default it will 
  //be 100 else 0
  if(image.height == 0){                                       
       image.setAttribute('src','../icons/default.png');
  }
-1