HTML se a imagem não for encontrada

Tenho uma imagem em uma página HTML:

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

Se a imagem não for encontrada no servidor, ela mostra um quadrado em branco feio.

Quero fazer com que, se uma imagem não for encontrada, ela não exiba nada ou alguma outra imagem padrão que sei que está definitivamente no servidor.

Como isso pode ser feito?

A melhor maneira de resolver seu problema:

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

onerror é uma coisa boa para você :)

Basta alterar o nome do arquivo de imagem e tentar você mesmo.

Bem, você pode tentar isso.

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

isso funcionou para mim. deixe-me saber sobre você.

Ok, mas eu gosto de usar desta forma, para que sempre que a imagem original não estiver disponível, você possa carregar sua imagem padrão que pode ser seu smiley favorito ou imagem dizendo Desculpe! Não disponível, mas caso ambas as imagens estejam faltando, você pode usar texto para exibir. onde você também pode sorrir então. dê uma olhada em quase todos os 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';">

Aqui, verifique abaixo o trecho de código que, neste, digitei incorretamente o nome da imagem. Então, só por isso está mostrando a imagem alternativa como imagem não 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="">

A maneira usual de lidar com esse cenário é definir a alttag para algo significativo.

Se você quiser uma imagem padrão em vez disso, sugiro usar uma tecnologia do lado do servidor para servir suas imagens, chamada usando um formato semelhante a:

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

No ImageHandler.aspxcódigo, identifique quaisquer erros de arquivo não encontrado e forneça o seu default.jpg.

Você pode mostrar um texto alternativo adicionando alt:

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

Eu adicionei um div pai ao redor da imagem e usei o seguinte manipulador de eventos onerror para ocultar a imagem original porque no IE ainda havia uma imagem feia de imagem não encontrada mostrada após usar o 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>

Em alternativa, se a imagem não existir - não mostre absolutamente nada. (o que eu estava procurando)

Você pode trocar a função da resposta de Robby Shaw no atributo "onerror" para "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">

Tente usar border=0na imgtag para fazer o quadrado feio desaparecer.

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

Eu queria esconder o espaço ocupado pela <img>etiqueta, então funcionou para mim

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

Se você quiser uma imagem alternativa em vez de um texto, você também pode 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";
}

maneira simples de lidar com isso, basta adicionar uma imagem de fundo.

tente PHP

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

funciona para mim que, se você não quiser usar o atributo alt se a imagem quebrar, então você pode usar este pedaço de código e definir de acordo.

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

Este funcionou para mim. usando o srcset. Eu acabei de aprender sobre isso, então não sei se os navegadores suportam, mas tem funcionado para mim. Experimente e depois me dê seu feedback.

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

Solução - Removi os elementos de altura e largura do img e o texto alternativo funcionou.

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

PARA

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

Obrigado a todos.