[html] HTML if image is not found

I have an image in a HTML page:

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

If the image is not found on the server it shows an ugly blank square.

I want to make it so that if an image is not found it will display nothing or some other default image that I know is definitely on the server.

How can this be done?

simple way to handle this, just add an background image.

If you want an alternative image instead of a text, you can as well use 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";
}

I added a parent div around the image and used the following onerror event handler to hide the original image because in IE there was still an ugly image-not-found image shown after using the alt attribute:

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

You can show an alternative text by adding alt:

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

its works for me that if you dont want to use alt attribute if image break then you can use this piece of code and set accordingly.

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

For the alternative, if the image doesn't exist - show nothing at all. (what I was looking for)

You can swap the function from Robby Shaw's answer in the "onerror" attribute to "this.remove()".

<img id="currentPhoto" src="SomeImage.jpg" alt='1' width="100" height="120">_x000D_
<img id="currentPhoto" src="SomeImage.jpg" onerror="this.onerror=null; this.remove();" alt="2" width="100" height="120">

The best way to solve your problem:

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

onerror is a good thing for you :)

Just change the image file name and try yourself.

try PHP

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

The usual way to handle this scenario is by setting the alt tag to something meaningful.

If you want a default image instead, then I suggest using a server-side technology to serve up your images, called using a similar format to:

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

In the ImageHandler.aspx code, catch any file-not-found errors and serve up your default.jpg instead.

Well you can try this.

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

this worked for me. let me know about you.

This one worked for me. using the srcset. I have just learnt about it so i dont know if browsers support it but it has worked for me. Try it and later give me your feed back.

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

Ok but I like to use this way, so that whenever original image is not available you can load your default image that may be your favorite smiley or image saying Sorry ! Not Available, But in case if both the images are missing you can use text to display. where you can also you smiley then. have a look almost covers every case.

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

Here Check below code snippet which, In this, I miss-spelled the image name. So, just because of that it is showing the alternative image as not found image ( 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="">

Try using border=0 in the img tag to make the ugly square go away.

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

I wanted to hide the space occupied by <img> tag so this worked for me

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