How do I make a placeholder image in HTML if the original image hasn't been found?

You'll have to use javascript:

<img src="404image" onerror="this.src='images/not_found.png';" />

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

Related