CODEWITHSUNDEEP
htmlpngsvg
Jason Christa
Jason Christa

Reputation: 12488

Can an HTML img tag have multiple src attributes?

Much like how the video tag can 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.

Upvotes: 24

Views: 45131

Answers (6)

Konstantin Smolyanin
Konstantin Smolyanin

Reputation: 19083

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

Upvotes: 20

Nacho Coloma
Nacho Coloma

Reputation: 7318

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

Upvotes: 4

Spadar Shut
Spadar Shut

Reputation: 15807

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.

Upvotes: 2

Taylor Satula
Taylor Satula

Reputation: 508

Simple answer... No.

Upvotes: -7

Armstrongest
Armstrongest

Reputation: 15419

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.

Upvotes: 5

SLaks
SLaks

Reputation: 887413

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)

Upvotes: 6

Related Questions