onerror event using background: url()

Question

Is there a way to show alternate image if source image is not found? I know to accomplish this is by doing something like below:

<img src="imagenotfound.gif" alt="Image not found" onError="this.src='imagefound.gif';" />

But how about if you are doing something like this, how can you catch if there is an error or if the image is not found?

<div style="background:url('myimage.gif')"></div>

Oriol · Accepted Answer · 2016-06-29T20:40:05.243

117

In case myimage.gif isn't transparent, you could use multiple backgrounds:

background: url('myimage.gif'), url('fallback.gif');

This way fallback.gif will only be visible if myimage.gif isn't available.

Note that fallback.gif may be downloaded even if myimage.gif is available.

Alternatively, even though not widely supported, CSS Images 3 introduces the image() notation:

background: image('myimage.gif', 'fallback.gif');

Multiple <image-decl>s can be given separated by commas, in which case the function represents the first image that's not an invalid image.

edited Jun 29 '16 at 20:40

answered Mar 09 '14 at 20:27

Oriol

274,082
63
437
513

1

This is nitpicky, but a better name for the second image would be `imagenotfound.gif`, since it is displayed when the first image is not available – booshong Nov 13 '14 at 10:46
1

@oriol is there anyway to prevent the 404 messages in the console when the first image is not found – Simon H Aug 02 '15 at 10:56
@SimonH Probably the console has some option to hide failed requests. – Oriol Aug 02 '15 at 19:01
1

@jpussacq According to [caniuse](http://caniuse.com/#feat=multibackgrounds), 94.58% browsers support multiple backgrounds. – Oriol Apr 17 '16 at 18:38
Thanks for the info. Unfortunately my client has IE8 :-( – jpussacq Apr 17 '16 at 18:47
@Oriol In my case .gif are transperant , any solution ? – Ashish May 29 '16 at 10:26
@Ashish Then I think you will need JavaScript – Oriol May 29 '16 at 14:41
2

CSS3 has not actually implemented image() yet. The reference is only to a Proposed Candidate Spec. – redfox05 May 16 '18 at 23:10
The published spec can be found here for this topic: https://www.w3.org/TR/css-backgrounds-3/#the-background-image – redfox05 May 16 '18 at 23:12
3

image() has in fact been deferred to CSS 4 Images: https://www.w3.org/TR/css-images-4/#image-notation and is completely unsupported at the moment: https://caniuse.com/#feat=mdn-css_types_image_image – Joe Dec 31 '19 at 13:46
It's a damned shame because `image()` would be ideal. https://caniuse.com/#search=image() – Ken Sharp Jul 07 '20 at 15:11

score 5 · Answer 2 · answered Mar 09 '14 at 20:30

With background images, there is no event; you have check yourself.

Make an (XML)HTTP request, and if you get a response with an error status code or no response at all (after timeout), use another image resource. This approach is limited by the Same-Origin Policy.

score 2 · Answer 3 · answered Aug 29 '18 at 08:53

You can also use a dummy-image and use the onerror event from there ...

        $imageFoo = '
        <div id="' . $uniqueId . '"
             style="
                background-image: url(//foo.lall/image.png);
                -webkit-background-size: contain;
                -moz-background-size: contain;
                -o-background-size: contain;
                background-size: contain;
                background-position: center;
                background-repeat: no-repeat;
             "
        ></div>
        <!-- this is a helper, only needed because "background-image" did not fire a "onerror" event -->
        <img style="display: none;" 
             src="//foo.lall/image.png" 
             onerror="var fallbackImages = $(this).data(\'404-fallback\'); $(\'#' . $uniqueId . '\').css(\'background-image\', \'url(\' + fallbackImages + \')\');"
             data-404-fallback="//foo.lall/image_fallback.png"
        >
        ';

onerror event using background: url()

3 Answers3

Linked