Can an HTML img tag have multiple src attributes?

Much like how the video tag c开发者_Go百科an provide multiple source attributes so an mp4 video can fall back to an ogg video, I would like to get an svg image to fall back to an png image.

---

At the time of the question it wasn't possible. But now it is OK to do like this:

​<picture>
    <source srcset="mdn-logo.svg" type="image/svg+xml">
    <img src="mdn-logo.png" alt="MDN">
</picture>

See docs on MDN

---

No, it cannot.

However, you can fake it using CSS background images.

To avoid displaying the broken image glyph, you might want to not use an <img> tag at all and instead use two nested elements with different background images. (Note that that would hurt accessibility)

---

There's a post here that might help: Fallback image and timeout - External Content. Javascript

It offers a few javascript options.

Using a background image works well, but you will have to know what the dimensions of your images are. If you don't know then it may be tricky.

---

Though this is probably not what you wanted, it's worth mentioning that you can specify different resolutions for retina displays:

<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x,
                                 image-3x.png 3x, image-4x.png 4x">

---

Just include the svg as <object> and put <img> inside of it.

<object data='image.svg'>
    <img src='image.png'>
</object>

That should work. The png image will only be shown when it's impossible to display svg.

---

Simple answer... No.