HTML if image is not found

Question

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?

In that case, maybe do a server-side or client-side request first to see what status code comes back? — Pekka, Nov 03 '11 at 12:50
I'm trying to not use js because I don't like slow websites and theres too many favicons to do it server side, it would get the server banned. — David19801, Nov 03 '11 at 12:55
@Pekka웃 Of course you should have functioning links on the site. What if the links aren't on your own site, but someone else's? Or what if they're coming from a remote data store and taking a while to download? — leetheguy, Oct 12 '17 at 17:33

score 366 · Answer 1 · edited May 30 '19 at 22:36

366

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.

edited May 30 '19 at 22:36

Nowaker

12,154
4
56
62

answered Nov 03 '11 at 13:01

Robby Shaw

4,725
1
14
11

4

Combined with a useful alt tag this is a great way to solve the problem! – mlibby Nov 05 '13 at 21:33
10

If Default.jpg is not available you will end up in an endless loop. You should add a check `if (this.src != 'Default.jpg')` – dehlen Jul 07 '16 at 10:05
10

To avoid infinite loops and better than the if : `this.onerror=null;` as given below by @Sudarshan. – Guillaume F. Nov 14 '16 at 15:13
1

anyone working with react, you can refer here https://stackoverflow.com/questions/34097560/react-js-replace-img-src-onerror – Earlee Feb 20 '20 at 07:40
Thanks this will working fine, i have one question can i do something for console error for that. – Kalpesh Dabhi Feb 26 '20 at 05:19
icanuse, https://www.caniuse.com/mdn-html_elements_img_onerror, lists onerror as "This feature is deprecated/obsolete and should not be used." As well as this is not supported for IE11 (for those who have to give commercial support) – TamusJRoyce Feb 18 '21 at 19:01

score 35 · Answer 2 · edited Nov 22 '21 at 18:15

35

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.

edited Nov 22 '21 at 18:15

jameshfisher

34,029
31
121
167

answered Jun 01 '14 at 11:06

Sudarshan Kalebere

3,813
3
34
64

6

Seems works in all major browsers. Just swap default and original. So that object renders original image and img default one – Evgeny Dec 16 '14 at 10:28
Not supported in IE11 (for those who have to continue LTS commercial support for IE) – TamusJRoyce Feb 18 '21 at 19:36
Not working for me. Code check says you can't have an inside an . – ChrisFox Jul 04 '21 at 09:59
1

Think you have sources swapped. It works if `object` attribute `data` is the first choice image and the `img` attribute `src` is the default image path. – openwonk Aug 02 '21 at 23:58

score 18 · Answer 3 · answered Mar 03 '20 at 10:58

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

score 14 · Answer 4 · answered Aug 12 '14 at 12:24

14

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

answered Aug 12 '14 at 12:24

Sudarshan Kalebere

3,813
3
34
64

2

Don't use alt for error texts if you want page to be parsed correctly by search engines. Search engines could index your content data incorrectly. – varela Sep 07 '17 at 08:08
What does `=base_url()?>` do? Why do you surprisingly add some server-side and framework-based code? – Nico Haase May 08 '18 at 13:41
@NicoHaase its url from php framework, well you can always write your own url for image, i have given an example that doesnt mean you should copy and paste it or concentrate on that url, you include your url it means. To explain you have to give example so i did. – Sudarshan Kalebere May 08 '18 at 18:24

juankysmith · Answer 5 · 2011-11-03T13:05:16.013

3

You can show an alternative text by adding alt:

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

edited Nov 03 '11 at 13:05

answered Nov 03 '11 at 12:47

juankysmith

11,839
5
37
62

maybe this square comes from the div (or another tag) that contains your img – juankysmith Nov 03 '11 at 12:52
alt doesn't seem to work if the img display style is 'block' – JohnFlux Mar 16 '19 at 12:42

score 2 · Answer 6 · answered Mar 12 '18 at 12:59

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>

score 2 · Answer 7 · answered Jan 22 '19 at 12:18

2

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

answered Jan 22 '19 at 12:18

krishna amarghade

31
9

icanuse, https://www.caniuse.com/mdn-html_elements_img_onerror, lists onerror as "This feature is deprecated/obsolete and should not be used." As well as this is not supported for IE11 (for those who have to give commercial support) – TamusJRoyce Feb 18 '21 at 19:00
https://stackoverflow.com/a/59366589/458321 - best practice is to set this up in a script, not as an attribute. The attribute is deprecated, not the event. – TamusJRoyce Feb 18 '21 at 19:34

score 2 · Answer 8 · answered Nov 03 '11 at 12:49

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.

score 0 · Answer 9 · answered Mar 18 '15 at 09:11

0

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

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

answered Mar 18 '15 at 09:11

Divyanshu Jimmy

2,542
5
32
48

score 0 · Answer 10 · answered Apr 12 '18 at 12:10

0

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

answered Apr 12 '18 at 12:10

stephen komu

11

You don't know if they're running PHP – BritishSam Jul 22 '22 at 12:26

score 0 · Answer 11 · answered Nov 27 '18 at 13:10

0

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

answered Nov 27 '18 at 13:10

vikas dhere

13
1
1

score 0 · Answer 12 · answered Nov 03 '11 at 12:56

0

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

answered Nov 03 '11 at 12:56

Aziz Shaikh

16,245
11
62
79

score -1 · Answer 13 · edited May 25 '15 at 14:44

-1

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>

edited May 25 '15 at 14:44

Murat Çorlu

8,207
5
53
78

answered May 25 '15 at 14:20

Nasir Shafique

9
1

score -2 · Answer 14 · answered May 08 '18 at 13:38

-2

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

answered May 08 '18 at 13:38

stephen komu

11

score -2 · Answer 15 · answered Jun 14 '20 at 08:16

-2

try PHP

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

answered Jun 14 '20 at 08:16

SIAMWEBSITE

171
1
4

score -34 · Accepted Answer · answered Nov 03 '11 at 12:58

-34

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.

answered Nov 03 '11 at 12:58

David19801

11,214
25
84
127

25

So you gave youself the "correct answer" but you answered with an answer unrelated to the question, GG WP. – Jean-Paul May 29 '16 at 15:42
2

oh this guy accepted his own answer out of all this correct answers hahaha, good way to cherish urself. – Sudarshan Kalebere Dec 11 '17 at 09:55
2

It's not the first time :D https://stackoverflow.com/a/12768098/1545917 – Ghilas BELHADJ Feb 19 '19 at 12:05
2

This answer did not provide an alternative image. – Patrick Knott Mar 08 '19 at 20:46
1

@david19801 care to explain? – Satish Patro May 06 '19 at 15:38

HTML if image is not found

16 Answers16

Linked

Related