28

Is it possible to show an alternate image if the original source file is not found? I would like to achieve this only with css and html, no javascript (or jQuery and alike). The idea is to still show an image instead of the "alt" test or default (ugly) cross of IE. If not possible without javascript I will then rather check the img src with php with a basic if-then-else.

rodedo
  • 791
  • 4
  • 10
  • 23

4 Answers4

67

Very simple and best way to achieve this with little code

<img class="avatar" src="img/one.jpg" alt="Not Found" onerror="this.src='img/undefined.jpg';">

To me the above works perfect!

DragonFire
  • 3,722
  • 2
  • 38
  • 51
Magige Daniel
  • 1,024
  • 1
  • 10
  • 10
  • A really useful snippet that solves the problem elegantly. However, OP explicitly asked *" to achieve this only with css and html, no javascript"* – domsson Mar 01 '17 at 12:08
  • 11
    Also, shouldn't it be `onerror="this.src='img/undefined.jpg';"`? Plus, see this question for a possible infinite loop and how to prevent it: http://stackoverflow.com/questions/8124866/how-does-one-use-the-onerror-attribute-of-an-img-element – domsson Mar 01 '17 at 12:10
  • yes that make sense also, you can manipulate it that way as well – Magige Daniel Apr 25 '19 at 17:21
  • 1
    As given, it doesn't work. The quoting suggested by @domsson has to be used. – tpb261 Nov 02 '20 at 19:14
17

You can do this using the CSS background-image property of the img element, i.e.

img
{
background-image:url('default.png');
}

However, you have to give a width or height for this to work (when the img-src is not found):

img
{
background-image:url('default.png');
width:400px;
}
Pang
  • 9,564
  • 146
  • 81
  • 122
emrea
  • 1,335
  • 9
  • 18
  • Did it work when you tested it? On my Firefox, the background is not shown when the real image is missing. On my IE, the background is shown, but so is the alt text or the red “×” in a box. – Jukka K. Korpela May 27 '12 at 08:04
  • I already selected the aswer but I have still a question: what do you mean with "you have to give a width or height for this to work (when the img-src is not found)"? If my img tag already has width and height will that be used also by the background image? – rodedo May 27 '12 at 08:07
  • @JukkaK.Korpela I quickly tried on my chromium and it seems that a file-not-found icon shows up at the center. – emrea May 27 '12 at 08:11
  • Be aware that for this to work, the path to the background image has to be relative to the folder where the file with the css code is (this was not obvious for me...) or an absolute URL. In addition, this solution has the drawback of showing two images one on top of the other if the real image is found and is "transparent" (e.g. like an icon); in this case another css class with `background-image:none;` is needed to handle special cases. – rodedo Jun 03 '12 at 15:18
  • 5
    This will have unfortunate side effects if the real image is translucent. – Quentin Mar 01 '17 at 12:04
  • You should note that the image will always be loaded. Which means: 1. What @Quentin said. 2. The data transmitted will obviously be increased if re-loading it every time someone visits the site. This can have immense impact the more images you use. – LuckyLuke Skywalker Jan 21 '21 at 10:15
  • background-repeat: no-repeat; background-size: cover; – Kashif Saleem Jun 10 '21 at 16:30
  • This will not work when the image URL returns some HTTP error like 403. In that case the browse would render ugly empty image placeholder. – liberborn Jun 01 '23 at 16:13
9
<object data="foobar.png" width=200 height=200>
  <img src="test.png" alt="Just testing.">
</object>

Here foobar.png is the primary image, test.png is the fallback image. By the semantics of the object element, the content of the element (here the img element) should be rendered if and only if the primary data (specified by the data attribute) cannot be used.

Though browsers have had awful bugs in implementations of object in the past year, this simple technique seems to work on modern versions of IE, Firefox, Chrome.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • 1
    Test case: http://jsfiddle.net/VkrJ4/1/ OK in *W7Pro x64* with Fx 12.0, IE9, Saf 5.1.5 and Op 11.64. Not tested with Chrome/Chromium. Not tested with screen readers and other ATs for now (the question being: "Are NVDA, JAWS, VoiceOver, ORCA, etc reading the @alt text to their users?") – FelipeAls May 27 '12 at 09:41
  • Since my primary use case was to display an svg or fallback to a jpg this is better than I could have possibly hoped for. (`` does svgs better than `` does) – Tadhg McDonald-Jensen Jun 01 '23 at 02:07
7

yes, you can do it by using only html, when img src not found then it will throw error so here we can handle it. One more point is set this.onerror = null for recursive calling (default image not found)

<img alt="User Image" class="user-image" src="/Resources/images/user-icon.png" onerror="this.onerror=null; this.src='/Resources/images/default_img.png'">
Kalpesh Dabhi
  • 760
  • 8
  • 18