HTML, jeśli nie znaleziono obrazu

Mam obraz na stronie HTML:

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

Jeśli obraz nie zostanie znaleziony na serwerze, pokazuje brzydki pusty kwadrat.

Chcę, aby jeśli obraz nie został znaleziony, nie wyświetlił niczego lub innego domyślnego obrazu, o którym wiem, że znajduje się na serwerze.

Jak można to zrobić?

Najlepszy sposób na rozwiązanie problemu:

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

onerror to dla ciebie dobra rzecz :)

Po prostu zmień nazwę pliku obrazu i spróbuj sam.

Cóż, możesz tego spróbować.

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

to działało dla mnie. daj mi znać o sobie.

Ok, ale lubię używać tego sposobu, aby za każdym razem, gdy oryginalny obraz nie był dostępny, można załadować domyślny obraz, który może być Twoim ulubionym uśmieszkiem lub obrazem z napisem Przepraszamy! Niedostępne, ale w przypadku, gdy brakuje obu obrazów, możesz użyć tekstu do wyświetlenia. gdzie możesz wtedy też się uśmiechnąć. spójrz na prawie każdy przypadek.

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

Tutaj Sprawdź poniższy fragment kodu, w którym brakuje mi nazwy obrazu. Tak więc tylko z tego powodu pokazuje alternatywny obraz jako obraz nie znaleziony (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="">

Zwykłym sposobem na obsłużenie tego scenariusza jest ustawienie altznacznika na coś znaczącego.

Jeśli zamiast tego chcesz uzyskać obraz domyślny, sugeruję użycie technologii po stronie serwera do wyświetlania obrazów, o nazwie przy użyciu formatu podobnego do:

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

W ImageHandler.aspxkodzie wyłap wszelkie błędy związane z nieodnalezieniem pliku i wyświetl default.jpgzamiast tego swój plik .

Możesz wyświetlić tekst alternatywny, dodając alt:

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

Dodałem nadrzędny element div dookoła obrazu i użyłem następującego modułu obsługi zdarzeń onerror, aby ukryć oryginalny obraz, ponieważ w IE nadal był brzydki obraz-nie znaleziono obrazu wyświetlany po użyciu atrybutu 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>

Alternatywnie, jeśli obraz nie istnieje - w ogóle nic nie pokazuj. (czego szukałem)

Możesz zamienić funkcję z odpowiedzi Robby'ego Shawa w atrybucie „onerror” na „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">

Spróbuj użyć border=0w imgtagu, aby brzydki kwadrat zniknął.

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

Chciałem ukryć miejsce zajmowane przez <img>tag, więc to zadziałało

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

Jeśli chcesz mieć alternatywny obraz zamiast tekstu, możesz równie dobrze użyć 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";
}

prosty sposób na rozwiązanie tego problemu, wystarczy dodać obraz tła.

wypróbuj PHP

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

dla mnie działa tak, że jeśli nie chcesz używać atrybutu alt, jeśli obraz się zepsuje, możesz użyć tego fragmentu kodu i odpowiednio ustawić.

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

Ten pracował dla mnie. używając srcset. Właśnie się o tym dowiedziałem, więc nie wiem, czy przeglądarki go obsługują, ale zadziałało. Spróbuj, a później daj mi swoją opinię.

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

Rozwiązanie - usunąłem elementy wysokości i szerokości z img, a tekst alt działał.

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

DO

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

Dziękuję wam wszystkim.