17

Basically what the title says.

I'm making an html page, and using images for link. But can I make it so the images show a default icon if the specified file hasn't been found?

StevoHN
  • 441
  • 1
  • 5
  • 19

4 Answers4

50

You'll have to use javascript:

<img src="404image" onerror="this.src='images/not_found.png';" />
x13
  • 2,179
  • 1
  • 11
  • 27
21

If you specify the width and height of an image in the css, you can set the background image as a not-found image:

img {
  width:100px;
  height:100px;
  background: url(http://goo.gl/vyAs27) no-repeat scroll 0 0;
}
<img src="not-found.png" /><img src="http://goo.gl/ijai22" />

Most browsers will insert an image missing icon in the corner. There's no way that I know of to remove this.

As you can see, your regular image will overlay the background image.

If your image has a transparent background then the background image will be visible behind the loaded image.

Alternatively, use a server-side programming language that checks if the image exists. If it does not, load a placeholder...

Richard Parnaby-King
  • 14,703
  • 11
  • 69
  • 129
1

If you just want to display a blank space without any dummy image/caption, remove the alt option that you have specified in the img tag.

<img src='not_found.jpg' alt='' class=''>

Here the source not_found.jpg is the wrong path which won't give any image. PFA for sample o/p.

  • Here 1st image is showing when it gets valid src & the 2nd one shows the blank space without any caption.

Here 1st image is showing when it gets valid src & the 2nd one shows the blank space without any caption.

Swaps
  • 1,450
  • 24
  • 31
0

img {
  width:100px;
  height:100px;
  background: url(https://i0.wp.com/reviveyouthandfamily.org/wp-content/uploads/2016/11/house-placeholder.jpg?ssl=1) no-repeat scroll 0 0;
}
<img src="not-found.png" /><img src="https://i0.wp.com/reviveyouthandfamily.org/wp-content/uploads/2016/11/house-placeholder.jpg?ssl=1" />