HTML, если изображение не найдено

У меня есть изображение на HTML-странице:

<img src="smiley.gif" alt="Smiley face" width="32" height="32" />

Если изображение не найдено на сервере, отображается уродливый пустой квадрат.

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

Как это может быть сделано?

Лучший способ решить вашу проблему:

<img id="currentPhoto" src="SomeImage.jpg" onerror="this.onerror=null; this.src='Default.jpg'" alt="" width="100" height="120">

onerror для тебя это хорошо :)

Просто измените имя файла изображения и попробуйте сами.

Что ж, вы можете попробовать это.

  <object data="URL_TO_Default_img.png" type="image/png">
   <img src="your_original_image.png" />
  </object>

это сработало для меня. дай мне знать о тебе.

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

<img src="path_to_original_img/img.png"  alt="Sorry! Image not available at this time" 
       onError="this.onerror=null;this.src='<?=base_url()?>assets1/img/default.jpg';">

Здесь проверьте нижеприведенный фрагмент кода, в котором я пропустил имя изображения. Таким образом, альтернативное изображение отображается как не найденное (404.svg).

<img id="currentPhoto" src="https://www.ccrharrow.org/Images/content/953/741209.pg" onerror="this.src='https://www.unesale.com/ProductImages/Large/notfound.png'" alt="">

Обычный способ справиться с этим сценарием - установить для altтега что-нибудь значимое.

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

<img src="ImageHandler.aspx?Img=Blue.jpg" alt="I am a picture" />

В ImageHandler.aspxкоде выявляйте любые ошибки "файл не найден" и обслуживайте default.jpgвместо них свои .

Вы можете показать альтернативный текст, добавив alt:

<img src="my_img.png" alt="alternative text" border="0" /> 

Я добавил родительский div вокруг изображения и использовал следующий обработчик события onerror, чтобы скрыть исходное изображение, потому что в IE все еще оставалось уродливое изображение, которое не было найдено после использования атрибута alt:

<div style=" width:300px; height:150px; float:left; margin-left:5px; margin-top:50px;">
        <img src='@Url.Content("~/Images/Logo-Left.png")' onerror="this.parentElement.innerHTML = '';" />
</div>

В качестве альтернативы, если изображения не существует - вообще ничего не показывать. (что я искал)

Вы можете заменить функцию из ответа Робби Шоу в атрибуте «onerror» на «this.remove ()».

<img id="currentPhoto" src="SomeImage.jpg" alt='1' width="100" height="120">
<img id="currentPhoto" src="SomeImage.jpg" onerror="this.onerror=null; this.remove();" alt="2" width="100" height="120">

Попробуйте использовать border=0в imgтеге, чтобы убрать уродливый квадрат.

<img src="someimage.png" border="0" alt="some alternate text" />

Я хотел скрыть пространство, занимаемое <img>тегом, так что это сработало для меня

<img src = "source.jpg" alt = "" >

Если вам нужно альтернативное изображение вместо текста, вы также можете использовать php:

$file="smiley.gif";
$alt_file="alt.gif";
if(file_exist($file)){
     echo "<img src='".$file."' border="0" />";
}else if($alt_file){
     // the alternative file too might not exist not exist
     echo "<img src='".$alt_file."' border="0" />";
}else{
  echo "smily face";
}

простой способ справиться с этим, просто добавьте фоновое изображение.

попробуйте PHP

if (file_exists('url/img/' . $Image)) {
    $show_img_URL = "Image.jpg";
} else {
    $show_img_URL = "Image_not_found.jpg";
}

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

<h1>
  <a> 
   <object data="~/img/Logo.jpg" type="image/png">
     Your Custom Text Here
   </object>
  </a>
</h1>

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

 <img src="smiley.gif" srcset="alternatve.gif" width="32" height="32" />

Решение. Я удалил элементы высоты и ширины img, а затем текст alt работал.

<img src="smiley.gif" alt="Smiley face" width="32" height="32" />

К

<img src="smiley.gif" alt="Smiley face" />

Спасибо вам всем.