HTML si no se encuentra la imagen

Tengo una imagen en una página HTML:

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

Si la imagen no se encuentra en el servidor, muestra un feo cuadrado en blanco.

Quiero que, si no se encuentra una imagen, no se muestre nada o alguna otra imagen predeterminada que sé que definitivamente está en el servidor.

¿Cómo se puede hacer esto?

La mejor forma de solucionar tu problema:

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

onerror es algo bueno para ti :)

Simplemente cambie el nombre del archivo de imagen y pruébelo usted mismo.

Bueno, puedes probar esto.

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

esto funcionó para mí. Déjame saber de ti.

Ok, pero me gusta usar de esta manera, para que siempre que la imagen original no esté disponible, puedas cargar tu imagen predeterminada que puede ser tu emoticón favorito o una imagen que diga ¡Lo siento! No disponible, pero en caso de que falten ambas imágenes, puede usar texto para mostrar. donde también puedes tu smiley entonces. Eche un vistazo a casi todos los casos.

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

Aquí Verifique el fragmento de código a continuación que, en esto, escribí mal el nombre de la imagen. Entonces, solo por eso, muestra la imagen alternativa como imagen no encontrada (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="">

La forma habitual de manejar este escenario es estableciendo la altetiqueta en algo significativo.

Si desea una imagen predeterminada en su lugar, le sugiero que utilice una tecnología del lado del servidor para servir sus imágenes, llamado usar un formato similar a:

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

En el ImageHandler.aspxcódigo, detecta cualquier error de archivo no encontrado y publica tu default.jpg.

Puede mostrar un texto alternativo agregando alt:

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

Agregué un div principal alrededor de la imagen y usé el siguiente controlador de eventos de error para ocultar la imagen original porque en IE todavía se mostraba una imagen fea no encontrada después de usar el atributo 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>

Como alternativa, si la imagen no existe, no muestre nada. (lo que estaba buscando)

Puede cambiar la función de la respuesta de Robby Shaw en el atributo "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">

Intente usar border=0en la imgetiqueta para hacer desaparecer el cuadrado feo.

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

Quería ocultar el espacio ocupado por la <img>etiqueta, así que esto funcionó para mí.

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

Si desea una imagen alternativa en lugar de un texto, también puede usar 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";
}

Una forma sencilla de manejar esto, simplemente agregue una imagen de fondo.

prueba PHP

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

Me funciona que si no desea usar el atributo alt si la imagen se rompe, puede usar este código y configurarlo en consecuencia.

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

Este funcionó para mí. usando el srcset. Me acabo de enterar, así que no sé si los navegadores lo admiten, pero me ha funcionado. Pruébalo y luego devuélveme tu feed.

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

Solución: eliminé los elementos de alto y ancho del img y luego funcionó el texto alternativo.

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

A

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

Gracias a todos.