Reputation: 11448

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?

Upvotes: 159

Answers (17)

Thomas Shaddack

Reputation: 43

I was having EXACTLY the same issue, and my internet seach brought me here. Thanks to Robert's answer (https://stackoverflow.com/a/7995298/4012770) I obtained what I needed.

Mi issue is that I have a flask template that applies on several different paths, sometimes picture exists, sometimes not. My source, now:

<h1 id="Titulo">Text that will be shown if image fails to load</h1>
<img src="/path_to_picture" onload="document.getElementById('Titulo').style.display = 'none'; return true;" onerror="this.style.display = 'none'; return true;">

So I print the text in one object with ID (in my case, title) AND I try to output the picture. If picture loads, I hide the text; if it doesn't load, I hide the picture (so no ugly broken icon is shown).

I know, old post... but it poped up when I searched so maybe this is useful for someone else... sometime.

Upvotes: 0

Sudarshan Kalebere

Reputation: 3929

Well you can try this.

  <object data="URL_to_preferred_image.png" type="image/png">
   <img src="URL_to_fallback_image.png" />
  </object>

this worked for me. let me know about you.

Upvotes: 39

SIAMWEBSITE

Reputation: 195

try PHP

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

Upvotes: -3

Bim

Reputation: 531

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">
<img id="currentPhoto" src="SomeImage.jpg" onerror="this.onerror=null; this.remove();" alt="2" width="100" height="120">

Upvotes: 22

Robby Shaw

Reputation: 4915

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.

Upvotes: 385

krishna amarghade

Reputation: 43

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

Upvotes: 2

vikas dhere

Reputation: 13

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

Upvotes: 0

stephen komu

Reputation: 11

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

Upvotes: -2

stephen komu

Reputation: 11

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

Upvotes: 0

Patrick Koorevaar

Reputation: 1343

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>

Upvotes: 2

Nasir Shafique

Reputation: 9

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>

Upvotes: -1

Divyanshu Jimmy

Reputation: 2742

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

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

Upvotes: 0

Sudarshan Kalebere

Reputation: 3929

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

Upvotes: 15

juankysmith

Reputation: 12448

You can show an alternative text by adding alt:

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

Upvotes: 3

David19801

Reputation: 11448

Solution - I removed the height and width elements of the img and then the alt text worked.

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

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

Thank you all.

Upvotes: -35

Aziz Shaikh

Reputation: 16524

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

Upvotes: 0

Widor

Reputation: 13275

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.

Upvotes: 2

HTML if image is not found

Answers (17)

Related Questions