HTML if image is not found

Question

I have an image in a HTML page    lt img src  smiley gif  alt  Smiley face  width  32  height  32    gt    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

User · Answer

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    lt img src  path to original img img png   alt  Sorry  Image not available at this time          onError  this onerror null this src   lt   base url    gt assets1 img default jpg    gt

User · Answer

The best way to solve your problem    lt img id  currentPhoto  src  SomeImage jpg  onerror  this onerror null  this src  Default jpg   alt    width  100  height  120  gt    onerror is a good thing for you     Just change the image file name and try yourself

User · Answer

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    lt img src  ImageHandler aspx Img Blue jpg  alt  I am a picture    gt    In the ImageHandler aspx code  catch any file-not-found errors and serve up your default jpg instead

User · Answer

Solution - I removed the height and width elements of the img and then the alt text worked    lt img src  smiley gif  alt  Smiley face  width  32  height  32    gt    TO   lt img src  smiley gif  alt  Smiley face    gt    Thank you all

User · Answer

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   lt img src     file    border  0    gt     else if  alt file           the alternative file too might not exist not exist      echo   lt img src     alt file    border  0    gt     else    echo  smily face

User · Answer

I wanted to  hide the space occupied by  lt img gt  tag so this worked for me   lt img  src    source jpg  alt       gt

User · Answer

try PHP  if  file exists  url img      Image          show img URL    Image jpg     else        show img URL    Image not found jpg

User · Answer

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     lt img src  smiley gif  srcset  alternatve gif  width  32  height  32    gt

User · Answer

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    lt h1 gt     lt a gt       lt object data    img Logo jpg  type  image png  gt       Your Custom Text Here     lt  object gt     lt  a gt   lt  h1 gt

User · Answer

Well you can try this      lt object data  URL TO Default img png  type  image png  gt      lt img src  your original image png    gt     lt  object gt    this worked for me  let me know about you

User · Answer

simple way to handle this  just add an background image

User · Answer

You can show an alternative text by adding alt    lt img src  my img png  alt  alternative text  border  0    gt

User · Answer

Try using border 0 in the img tag to make the ugly square go away    lt img src  someimage png  border  0  alt  some alternate text    gt

User · Answer

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      x000D   x000D   lt 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    gt  x000D   x000D   x000D

User · Answer

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       x000D   x000D   lt img id  currentPhoto  src  SomeImage jpg  alt  1  width  100  height  120  gt  x000D   lt img id  currentPhoto  src  SomeImage jpg  onerror  this onerror null  this remove     alt  2  width  100  height  120  gt  x000D   x000D   x000D

User · Answer

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    lt div style   width 300px  height 150px  float left  margin-left 5px  margin-top 50px   gt           lt img src   Url Content    Images Logo-Left png    onerror  this parentElement innerHTML          gt   lt  div gt

[html] HTML if image is not found

Examples related to html