Displaying backup image in html

Question

When a browser is not capable of handling a font package specialFont, the following code automatically switches the font to basicFont:

<p style="font-family:'specialFont', basicFont"> Hello world! </p>

Is the same possible for images? I have an svg image that I would like to display in general, and a backup png for browsers that do not support svg (like some mobile browsers).

http://stackoverflow.com/questions/980855/inputting-a-default-image-in-case-the-src-arribute-of-an-html-img-is-not-valid — ajc, Oct 24 '13 at 18:08
The question is not about fallback for missing images but about fallbacks for *unsupported image formats*. — Jukka K. Korpela, Oct 24 '13 at 19:15

score 1 · Accepted Answer · answered Oct 24 '13 at 18:10

1

I don't think it's possible like this, but here's a good & quick solution: http://css-tricks.com/svg-fallbacks/

answered Oct 24 '13 at 18:10

The Conspiracy

3,495
1
17
18

score 1 · Answer 2 · answered Oct 24 '13 at 19:20

A simple scenario is to use an object element with another object element (referring to e.g. a PNG file) inside it, i.e. as fallback content. Although this seems to work well on Android 2, IE 8 and older get confused with this. So I think we need to handle them with ugly “IE pseudocomments” (aka. “conditional comments”):

<!--[if (IE 9)|!(IE)]><!-->
  <object data=logo.svg type=image/svg+xml width=50 height=50>
    <object data=logo.png type=image/png width=50 height=50>
      <span class=logo>ACME</span>
    </object>
  </object>
<!-- <![endif]-->
<!--[if lte IE 8]>
  <img src=logo.png alt=ACME>
<![endif]-->

score 1 · Answer 3 · answered Mar 10 '17 at 18:05

object-elements are bad because they load all images, even if not needed. a simple img-element is not very flexible so i combined it with a picture-element. this way no CSS is needed. when an error occurs, all srcset's are set to the fallback version. a broken link image is not showing up. the picture-element supports responsive design and multiple fallbacks for types that are not supported by the browser.

<picture>
    <source id="s1" srcset="portrait_version.svg" type="image/svg+xml" media="orientation: portrait">
    <source id="s2" srcset="landscape_version.svg" type="image/svg+xml">
    <img src="fallback.png" alt="" onerror="this.onerror=null;document.getElementById('s1').srcset=document.getElementById('s2').srcset=this.src;">
</picture>

score 0 · Answer 4 · answered Oct 24 '13 at 18:15

0

You can use onerror event to fill the gap. Tying onError event with jQuery or similar we can provide default image. For more I have a post.

answered Oct 24 '13 at 18:15

Satya Prakash

3,372
3
31
47

score 0 · Answer 5 · answered Sep 14 '21 at 15:46

0

Give your image an onerror to swap the image source

<img src="mainImage.png"
onerror='this.src = "backupImage.png"'>

answered Sep 14 '21 at 15:46

bxk21

151
1
10

is this safe... – basic mojo Dec 28 '21 at 13:42
it could cause an error loop if the backup image is also causing an error – bapho Nov 03 '22 at 17:07

Displaying backup image in html

5 Answers5