Подтвердить что ты не робот

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

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

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

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

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

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

4b9b3361

Ответ 1

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

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

К

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

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

Ответ 2

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

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

onerror это хорошая вещь для вас :)

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

Ответ 3

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

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

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

Ответ 4

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

<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';">

Ответ 5

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

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

Ответ 6

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

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

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

В коде ImageHandler.aspx поймайте любые ошибки, не найденные в файле, и вместо этого выполните default.jpg.

Ответ 7

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

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

Ответ 8

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

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

Ответ 9

Я добавил родительский 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>

Ответ 10

Если вам нужно альтернативное изображение вместо текста, вы также можете использовать 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";
}

Ответ 11

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

Ответ 12

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

<img id="currentPhoto" src="https://appharbor.com/assets/images/stackoverflow-lgo.png" onerror="this.src='https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg'" alt="" width="100" height="150">

Ответ 13

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

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

Ответ 14

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

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