Как обнаружить сломанное изображение и заменить на другое?

Question

У меня есть страница, которая отображает множество изображений с разных удаленных серверов.http://example.com/img/email_star0.png' height = '150' />

Теперь предположим, что этого изображения нет, я получил (x) в своем html.В любом случае я могу обнаружить, что это изображение отсутствует, и заменить его (x) на локальное изображение, не проверяя, существует ли файл на удаленном сервере с помощью Curl (или с использованием JQuery в этом отношении) и тем самым экономя время?Можно ли это сделать на месте?

Спасибо за помощь

Answer 1

Да, это возможно с помощью события onerror:

<img src="your_image_source" onerror="this.src='/path/to/local/file'">

Если изображение не существует, вместо отображения X будет отображаться изображение по умолчанию в вашей локальной папке

Answer 2

Вы можете использовать атрибут 'onerror' непосредственно в теге изображения:

<img src="my_images.jpg" onerror="this.src='my_replacement.jpg'">

Answer 3

Я не думаю, что можно проверить, существует ли изображение на удаленном сервере, без использования curl или jQuery. Но приведенный ниже фрагмент кода jQuery реагирует на ошибку загрузки изображения, заменяя ее на локальную, возможно, это то, что вы ищете.

$(document).ready(function(){
  $('img').error(function(){
     $(this).attr('src', 'http://mysite/myimage.jpg');
  });
});