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?

4

16 Answers

The best way to solve your problem:

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

7

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.

4

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

3

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

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.

You can show an alternative text by adding alt:

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

2

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> <img src='@Url.Content("~/Images/Logo-Left.png")' onerror="this.parentElement.innerHTML = '';" />
</div>

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 src="" onerror="this.src='" alt="">

2

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

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

0

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

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>

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

try PHP

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

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

TO

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

Thank you all.

5

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy