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" />

Дякую вам всім.