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

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

ОТВЕТЫ

Ответ 1

Вы запросили решение только для 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://cdn.sstatic.net/Img/unified/sprites.svg?v=e5e58ae7df45" alt="Qaru logo and icons and such">
    </object>
  </p>

</body>

</html>

Ответ 2

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

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

Обновлен с защитой ошибок jacquargs

Обновлено: только решение 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 { ...

Ответ 3

Нашел это решение в Spring в Action 3rd Ed.

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

Update: Это не только решение HTML... onerror - это javascript

Ответ 4

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

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

Ответ 5

Я не думаю, что это возможно, используя только 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

Ответ 6

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

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

Объяснение

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

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

Ответ 7

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

Ответ 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

Ответ 9

простой 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>

Ответ 10

angular2:

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

Ответ 11

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

Как таковой, вы также должны включать alt/text с WEFATH DEFAULT и HEIGHT, как это. Это чистое решение 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">

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

Вы можете еще больше стилизовать alt/text, чтобы быть ОЧЕНЬ БОЛЬШОЙ...

Итак, мой ответ - использовать Javascript с приятным резервом alt/text.

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

Ответ 12

Вышеупомянутое решение неполное, оно пропустило атрибут 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';" />

Ответ 13

Модируемая версия с 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:

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

Ответ 14

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

<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:

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);
                });
            }
        };
    }])

Ответ 15

Простое и аккуратное решение, включающее несколько хороших ответов и комментариев.

<img src="foo.jpg" onerror="this.src='error.jpg';this.onerror='';">

Это даже решает риск бесконечной циклы.

Работал на меня.

Ответ 16

Используя 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");
    }
});

Ответ 17

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

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

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

Ответ 18

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

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

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

Ответ 19

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

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

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

Ответ 20

Если вы создали динамический веб-проект и поместили требуемое изображение в WebContent, вы можете получить к нему доступ, используя нижеприведенный код в Spring MVC:

<img src="Refresh.png" alt="Refresh" height="50" width="50">

Вы также можете создать папку с именем img и поместить изображение в папку img и поместить эту папку img в WebContent, а затем получить доступ к изображению, используя указанный ниже код:

<img src="img/Refresh.png" alt="Refresh" height="50" width="50">

Ответ 21

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

 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');
  }