HTML se l'immagine non viene trovata

Ho un'immagine in una pagina HTML:

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

Se l'immagine non viene trovata sul server, mostra un brutto quadrato vuoto.

Voglio fare in modo che se un'immagine non viene trovata non visualizzi nulla o qualche altra immagine predefinita che so essere sicuramente sul server.

Come si può fare?

Il modo migliore per risolvere il tuo problema:

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

onerror è una buona cosa per te :)

Basta cambiare il nome del file immagine e provare tu stesso.

Bene, puoi provare questo.

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

questo ha funzionato per me. fammi sapere di te.

Ok ma mi piace usare in questo modo, in modo che ogni volta che l'immagine originale non è disponibile puoi caricare la tua immagine predefinita che potrebbe essere la tua faccina preferita o l'immagine che dice Scusa! Non disponibile, ma nel caso in cui mancano entrambe le immagini è possibile utilizzare il testo da visualizzare. dove puoi anche sorridere allora. dare un'occhiata copre quasi ogni caso.

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

Qui controlla sotto lo snippet di codice che, in questo, ho scritto male il nome dell'immagine. Quindi, proprio per questo, mostra l'immagine alternativa come immagine non trovata (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="">

Il modo usuale per gestire questo scenario è impostare il alttag su qualcosa di significativo.

Se invece desideri un'immagine predefinita, ti suggerisco di utilizzare una tecnologia lato server per offrire le tue immagini, chiamata utilizzando un formato simile a:

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

Nel ImageHandler.aspxcodice, individua eventuali errori di file non trovato e pubblica il tuo default.jpg.

Puoi mostrare un testo alternativo aggiungendo alt:

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

Ho aggiunto un div genitore attorno all'immagine e ho usato il seguente gestore di eventi onerror per nascondere l'immagine originale perché in IE c'era ancora un'immagine brutta immagine non trovata mostrata dopo aver usato l'attributo 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>

In alternativa, se l'immagine non esiste, non mostrare assolutamente nulla. (cosa stavo cercando)

Puoi scambiare la funzione dalla risposta di Robby Shaw nell'attributo "onerror" a "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">

Prova a usare border=0nel imgtag per far sparire il brutto quadrato.

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

Volevo nascondere lo spazio occupato dal <img>tag, quindi questo ha funzionato per me

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

Se vuoi un'immagine alternativa invece di un testo, puoi anche usare 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";
}

modo semplice per gestire questo, basta aggiungere un'immagine di sfondo.

prova PHP

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

Per me funziona che se non vuoi usare l'attributo alt se l'immagine si interrompe, puoi usare questo pezzo di codice e impostare di conseguenza.

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

Questo ha funzionato per me. utilizzando srcset. L'ho appena imparato, quindi non so se i browser lo supportano, ma ha funzionato per me. Provalo e poi restituiscimi il tuo feed.

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

Soluzione: ho rimosso gli elementi di altezza e larghezza di img e quindi il testo alternativo ha funzionato.

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

PER

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

Grazie a tutti.