HTML if image not found

Question

I have an image on an 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 empty square.

I want to make sure that if the image is not found, it will not display anything or another default image that I know is definitely located on the server.

How can I do that?

Answer 1

Decision. I removed the img height and width elements and then processed the alt text.

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

TO

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

Thanks to everyone.

Answer 2

The best way to solve your problem:

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

onerror is a good thing for you :)

Just change the image file name and try it yourself.

Answer 3

Ok, you can try this.

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

it worked for me. let me know about you.

Answer 4

Ok, but I like to use this method so that whenever the original image is not available, you can upload a default image, which can be your favorite emoticon or image. Sorry! Not available, but if both images are missing, you can use text to display. where you can also smile. take a look at almost 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';"> 

Answer 5

You can display alternate text by adding alt :

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

Answer 6

The usual way to handle this script is to set the alt tag to something meaningful.

If you want to use the default image instead, I suggest using server technology to serve your images, called using a similar format:

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

In the ImageHandler.aspx code ImageHandler.aspx catch any errors not found in the file, and instead execute default.jpg .

Answer 7

Try using border=0 in the img tag to remove the ugly square.

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

Answer 8

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

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

Answer 9

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

Answer 10

If you need an alternative image instead of text, you can also 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"; } 

Answer 11

an easy way to handle this, just add a background image.

Answer 12

Here check the code snippet below, which, in this one, I skipped the image name. Thus, that is why it shows the alternative image as an undetected image (404.svg).

 <img id="currentPhoto" src="https://appharbor.com/assets/images/stackoverflow-lgo.png" onerror="this.src='https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg'" alt="" width="100" height="150"> 

Answer 13

Its work for me that if you do not want to use the alt attribute, if the image is broken, 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> 

Answer 14

This one worked for me. using srcset. I just found out about this, so I don’t know if its browsers support it, but it worked for me. Try it and then give me back your food.

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