Обработайте событие onError для изображения, чтобы переназначить его источник с помощью JavaScript:

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

<img src = "image.png" onerror = "imgError(this);"/>

Или без функции JavaScript:

<img src = "image.png" onError = "this.onerror=null;this.src='/images/noimage.gif';" />

В следующей таблице совместимости перечислены браузеры, поддерживающие функцию ошибок:

http://www.quirksmode.org/dom/events/error.html

Я считаю, что это то, что вам нужно: jQuery.Preload

Вот пример кода из демонстрации, вы указываете загружаемые и не найденные изображения, и все готово:

jQuery('#images img').preload({
  placeholder:'placeholder.jpg',
  notFound:'notfound.jpg'
});

Я не уверен, есть ли лучший способ, но я могу придумать, как его получить - вы можете опубликовать Ajax по URL-адресу img и проанализировать ответ, чтобы увидеть, действительно ли изображение вернулось. Если он вернулся как 404 или что-то в этом роде, замените img. Хотя я ожидаю, что это будет довольно медленно.

Вот автономное решение:

$(window).load(function() {
  $('img').each(function() {
    if ( !this.complete
    ||   typeof this.naturalWidth == "undefined"
    ||   this.naturalWidth == 0                  ) {
      // image was broken, replace with your new image
      this.src = 'http://www.tranism.com/weblog/images/broken_ipod.gif';
    }
  });
});

Я использую встроенный обработчик error:

$("img").error(function () {
    $(this).unbind("error").attr("src", "broken.gif");
});

Редактировать: Метод error() устарел в jquery 1.8 и выше. Вместо этого вы должны использовать .on("error"):

$("img").on("error", function () {
    $(this).attr("src", "broken.gif");
});

$(window).bind('load', function() {
  $('img').each(function() {
    if ( (typeof this.naturalWidth != "undefined" && this.naturalWidth == 0) 
    ||  this.readyState == 'uninitialized'                                  ) {
        $(this).attr('src', 'missing.jpg');
    }
  });
});

Источник: http://www.developria.com/2009/03/jquery-quickie---broken-images.html

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

Я ограничил его 10 попытками, как если бы оно не было загружено к тому времени, изображение могло отсутствовать на сервере, и функция зашла бы в бесконечный цикл. Я все еще тестирую. Не стесняйтесь его настраивать :)

var retries = 0;
$.imgReload = function() {
    var loaded = 1;

    $("img").each(function() {
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {

            var src = $(this).attr("src");
            var date = new Date();
            $(this).attr("src", src + "?v = " + date.getTime()); //slightly change url to prevent loading from cache
            loaded =0;
        }
    });

    retries +=1;
    if (retries < 10) { // If after 10 retries error images are not fixed maybe because they
                        // are not present on server, the recursion will break the loop
        if (loaded == 0) {
            setTimeout('$.imgReload()',4000); // I think 4 seconds is enough to load a small image (<50k) from a slow server
        }
        // All images have been loaded
        else {
            // alert("images loaded");
        }
    }
    // If error images cannot be loaded  after 10 retries
    else {
        // alert("recursion exceeded");
    }
}

jQuery(document).ready(function() {
    setTimeout('$.imgReload()',5000);
});

Лучше вызвать, используя

jQuery(window).load(function(){
    $.imgReload();
});

Поскольку использование document.ready не обязательно означает, что загружаются изображения, только HTML. Таким образом, нет необходимости в отложенном звонке.

Если кто-то вроде меня пытается прикрепить событие error к динамическому HTML-тегу img, я хотел бы указать на это, здесь есть одна загвоздка:

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

Итак, что-то вроде следующего будет не работа:

$(document).on('error', 'img', function () { ... })

Надеюсь, это будет полезно кому-то еще. Хотел бы я видеть это здесь, в этой теме. Но я этого не сделал. Итак, я добавляю это

(window.jQuery || window.Zepto).fn.fallback = function (fallback) {
  return this.one('error', function () {
    var self = this;
    this.src = (fallback || 'http://lorempixel.com/$width/$height').replace(
      /$(\w+)/g, function (m, t) { return self[t] || ''; }
    );
  });
};
    

Вы можете передать путь-заполнитель и получить доступ ко всем свойствам из отказавшего объекта изображения через $*:

$('img').fallback('http://dummyimage.com/$widthx$height&text=$src');

http://jsfiddle.net/ARTsinn/Cu4Zn/

Вариант CoffeeScript:

Я сделал это, чтобы исправить проблему с Turbolinks, из-за которой метод .error () иногда возникает в Firefox, даже если изображение действительно существует.

$("img").error ->
  e = $(@).get 0
  $(@).hide() if !$.browser.msie && (typeof this.naturalWidth == "undefined" || this.naturalWidth == 0)

Я решил свою проблему с помощью этих двух простых функций:

function imgExists(imgPath) {
    var http = jQuery.ajax({
                   type:"HEAD",
                   url: imgPath,
                   async: false
               });
    return http.status != 404;
}

function handleImageError() {
    var imgPath;

    $('img').each(function() {
        imgPath = $(this).attr('src');
        if (!imgExists(imgPath)) {
            $(this).attr('src', 'images/noimage.jpg');
        }
    });
}

Вот быстрый и грязный способ заменить все битые изображения, и нет необходимости изменять HTML-код;)

пример кода

    $("img").each(function(){
        var img = $(this);
        var image = new Image();
        image.src = $(img).attr("src");
        var no_image = "https://dummyimage.com/100x100/7080b5/000000&text=No+image";
        if (image.naturalWidth == 0 || image.readyState == 'uninitialized'){
            $(img).unbind("error").attr("src", no_image).css({
                height: $(img).css("height"),
                width: $(img).css("width"),
            });
        }
  });

Это дрянная техника, но она практически гарантирована:

<img onerror = "this.parentNode.removeChild(this);">

Это расстраивало меня годами. Мое исправление CSS устанавливает фоновое изображение на img. Когда динамическое изображение src не загружается на передний план, на панели img отображается заполнитель. Это работает, если ваши изображения имеют размер по умолчанию (например, height, min-height, width и / или min-width).

Вы увидите значок сломанного изображения, но это улучшение. Успешно протестирован до IE9. iOS Safari и Chrome даже не показывают сломанный значок.

.dynamicContainer img {
  background: url('/images/placeholder.png');
  background-size: contain;
}

Добавьте небольшую анимацию, чтобы дать src время для загрузки без мерцания фона. Фон Chrome плавно исчезает, а Safari для настольных ПК - нет.

.dynamicContainer img {
  background: url('/images/placeholder.png');
  background-size: contain;
  animation: fadein 1s;                     
}

@keyframes fadein {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1.0; }
}

Используя Ответ престаула, я добавил несколько проверок и предпочитаю использовать способ jQuery.

<img src = "image1.png" onerror = "imgError(this,1);"/>
<img src = "image2.png" onerror = "imgError(this,2);"/>

function imgError(image, type) {
    if (typeof jQuery !== 'undefined') {
       var imgWidth=$(image).attr("width");
       var imgHeight=$(image).attr("height");

        // Type 1 puts a placeholder image
        // Type 2 hides img tag
        if (type == 1) {
            if (typeof imgWidth !== 'undefined' && typeof imgHeight !== 'undefined') {
                $(image).attr("src", "http://lorempixel.com/" + imgWidth + "/" + imgHeight + "/");
            } else {
               $(image).attr("src", "http://lorempixel.com/200/200/");
            }
        } else if (type == 2) {
            $(image).hide();
        }
    }
    return true;
}

Это JavaScript, он должен быть кроссбраузерным и работать без уродливой разметки onerror = "":

var sPathToDefaultImg = 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
    validateImage = function( domImg ) {
        oImg = new Image();
        oImg.onerror = function() {
            domImg.src = sPathToDefaultImg;
        };
        oImg.src = domImg.src;
    },
    aImg = document.getElementsByTagName( 'IMG' ),
    i = aImg.length;

while ( i-- ) {
    validateImage( aImg[i] );
}

КОДЕПЕН:

Если вы вставили свой img с innerHTML, например: $("div").innerHTML = <img src = "wrong-uri">, вы можете загрузить другое изображение, если оно не выполняется, например, следующее:

<script>
    function imgError(img) {
        img.error = "";
        img.src = "valid-uri";
    }
</script>

<img src = "wrong-uri" onerror = "javascript:imgError(this)">

Зачем нужен javascript: _? Поскольку скрипты, внедренные в DOM через теги скриптов в innerHTML, не выполняются в момент их внедрения, поэтому вы должны быть явным.

Для этого вы можете использовать собственную выборку GitHub:

Внешний интерфейс: https://github.com/github/fetch
или для Backend версия Node.js: https://github.com/bitinn/node-fetch

fetch(url)
  .then(function(res) {
    if (res.status == '200') {
      return image;
    } else {
      return placeholder;
    }
  }

Обновлено: этот метод заменит XHR и, предположительно, уже был в Chrome. Для тех, кто будет читать это в будущем, вам может не понадобиться включенная вышеупомянутая библиотека.

Я нашел этот пост, глядя на этот другой пост SO. Ниже приводится копия ответа, который я дал там.

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

Итак, если вы используете React, вы можете сделать что-то вроде приведенного ниже, который был оригиналом ответа, предоставленным Беном Альпертом из команды React здесь.

getInitialState: function(event) {
    return {image: "http://example.com/primary_image.jpg"};
},
handleError: function(event) {
    this.setState({image: "http://example.com/failover_image.jpg"});
},
render: function() {
    return (
        <img onError = {this.handleError} src = {src} />;
    );
}

Я создал рабочий пример, чтобы заменить сломанное изображение с помощью события «onerror». Это может вам помочь.

    //the placeholder image url
    var defaultUrl = "url('https://sadasd/image02.png')";

    $('div').each(function(index, item) {
      var currentUrl = $(item).css("background-image").replace(/^url\(['"](.+)['"]\)/, '');
      $('<img>', {
        src: currentUrl
      }).on("error", function(e) {
        $this = $(this);
        $this.css({
          "background-image": defaultUrl
        })
        e.target.remove()
      }.bind(this))
    })

Хотя OP искал замену SRC, я уверен, что многие люди, задающие этот вопрос, могут захотеть только скрыть сломанное изображение, и в этом случае это простое решение отлично сработал для меня.

Использование встроенного JavaScript:

<img src = "img.jpg" onerror = "this.style.display='none';" />

Использование внешнего JavaScript:

var images = document.querySelectorAll('img');

for (var i = 0; i < images.length; i++) {
  images[i].onerror = function() {
    this.style.display='none';
  }
}

<img src='img.jpg' />

Использование современного внешнего JavaScript:

document.querySelectorAll('img').forEach((img) => {
  img.onerror = function() {
    this.style.display = 'none';
  }
});

<img src='img.jpg' />

См. Поддержку браузером NodeList.forEach и стрелочные функции.

Вот пример использования объекта HTML5 Image, обернутого JQuery. Вызовите функцию загрузки для URL-адреса основного изображения и, если эта загрузка вызывает ошибку, замените атрибут src изображения на резервный URL-адрес.

function loadImageUseBackupUrlOnError(imgId, primaryUrl, backupUrl) {
    var $img = $('#' + imgId);
    $(new Image()).load().error(function() {
        $img.attr('src', backupUrl);
    }).attr('src', primaryUrl)
}

<img id = "myImage" src = "primary-image-url"/>
<script>
    loadImageUseBackupUrlOnError('myImage','primary-image-url','backup-image-url');
</script>

Чистый JS. Моя задача заключалась в следующем: если изображение 'bl-once.png' пусто -> вставить первое (не имеющее статуса 404) изображение из списка массивов (в текущем каталоге):

<img src = "http://localhost:63342/GetImage/bl-once.png" width = "200" onerror = "replaceEmptyImage.insertImg(this)">

Может быть, его нужно улучшить, но:

var srcToInsertArr = ['empty1.png', 'empty2.png', 'needed.png', 'notActual.png']; // try to insert one by one img from this array
    var path;
    var imgNotFounded = true; // to mark when success

    var replaceEmptyImage = {
        insertImg: function (elem) {

            if (srcToInsertArr.length == 0) { // if there are no more src to try return
                return "no-image.png";
            }
            if (!/undefined/.test(elem.src)) { // remember path
                path = elem.src.split("/").slice(0, -1).join("/"); // "http://localhost:63342/GetImage"
            }
            var url = path + "/" + srcToInsertArr[0];

            srcToInsertArr.splice(0, 1); // tried 1 src

            
                if (imgNotFounded){ // while not success
                    replaceEmptyImage.getImg(url, path, elem); // CALL GET IMAGE
                }
            

        },
        getImg: function (src, path, elem) { // GET IMAGE

            if (src && path && elem) { // src = "http://localhost:63342/GetImage/needed.png"
                
                var pathArr = src.split("/"); // ["http:", "", "localhost:63342", "GetImage", "needed.png"]
                var name = pathArr[pathArr.length - 1]; // "needed.png"

                xhr = new XMLHttpRequest();
                xhr.open('GET', src, true);
                xhr.send();

                xhr.onreadystatechange = function () {

                    if (xhr.status == 200) {
                        elem.src = src; // insert correct src
                        imgNotFounded = false; // mark success
                    }
                    else {
                        console.info(name + " doesn't exist!");
                        elem.onerror();
                    }

                }
            }
        }

    };

Таким образом, он вставит правильный файл «необходимый.png» в мой src или «no-image.png» из текущего каталога.

jQuery 1.8

// If missing.png is missing, it is replaced by replacement.png
$( "img" )
  .error(function() {
    $( this ).attr( "src", "replacement.png" );
  })
  .attr( "src", "missing.png" );

jQuery 3

// If missing.png is missing, it is replaced by replacement.png
$( "img" )
  .on("error", function() {
    $( this ).attr( "src", "replacement.png" );
  })
  .attr( "src", "missing.png" );

ссылка

У меня та же проблема. Этот код хорошо работает в моем случае.

// Replace broken images by a default img
$('img').each(function(){
    if ($(this).attr('src') === ''){
      this.src = '/default_feature_image.png';
    }
});

Иногда использование события error невозможно, например потому что вы пытаетесь сделать что-то на уже загруженной странице, например, когда вы запускаете код через консоль, букмарклет или скрипт, загружаемый асинхронно. В этом случае проверка того, что img.naturalWidth и img.naturalHeight равны 0, похоже, помогает.

Например, вот фрагмент для перезагрузки всех битых изображений из консоли:

$$("img").forEach(img => {
  if (!img.naturalWidth && !img.naturalHeight) {
    img.src = img.src;
  }
}

Если изображение не может быть загружено (например, потому что оно отсутствует по указанному URL-адресу), URL-адрес изображения будет изменен на значение по умолчанию,

Подробнее о .ошибка()

$('img').on('error', function (e) {
  $(this).attr('src', 'broken.png');
});

Я думаю, что у меня есть более элегантный способ делегирования событий и захвата событий на windowerror, даже если резервный образ не загружается.

img {
  width: 100px;
  height: 100px;
}

<script>
  window.addEventListener('error', windowErrorCb, {
    capture: true
  }, true)

  function windowErrorCb(event) {
    let target = event.target
    let isImg = target.tagName.toLowerCase() === 'img'
    if (isImg) {
      imgErrorCb()
      return
    }

    function imgErrorCb() {
      let isImgErrorHandled = target.hasAttribute('data-src-error')
      if (!isImgErrorHandled) {
        target.setAttribute('data-src-error', 'handled')
        target.src = 'backup.png'
      } else {
        //anything you want to do
        console.info(target.alt, 'both origin and backup image fail to load!');
      }
    }
  }
</script>
<img id = "img" src = "error1.png" alt = "error1">
<img id = "img" src = "error2.png" alt = "error2">
<img id = "img" src = "https://i.stack.imgur.com/ZXCE2.jpg" alt = "avatar">

Дело в том :

1. Поместите код в head и выполните его как первый встроенный скрипт. Таким образом, он будет отслеживать ошибки, возникающие после сценария.

2. Используйте захват событий, чтобы поймать ошибки, особенно для тех событий, которые не всплывают.

3. Используйте делегирование событий, которое позволяет избежать привязки событий к каждому изображению.

4. Дайте элементу ошибки img атрибут после присвоения им backup.png, чтобы избежать исчезновения backup.png и последующего бесконечного цикла, как показано ниже:

img error-> backup.png-> error-> backup.png-> error -> ,,,,,

Я обнаружил, что это работает лучше всего: если какое-либо изображение не загружается в первый раз, оно полностью удаляется из DOM. Выполнение console.clear() сохраняет окно консоли чистым, поскольку ошибки 404 не могут быть пропущены с помощью блоков try / catch.

$('img').one('error', function(err) {
    // console.info(JSON.stringify(err, null, 4))
    $(this).remove()
    console.clear()
})

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

lazyload();

var errorURL = "https://example.com/thisimageexist.png";

$(document).ready(function () {
  $('[data-src]').on("error", function () {
    $(this).attr('src', errorURL);
  });
});