Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can an HTML img tag have multiple src attributes?

Tags:

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.

like image 690
Jason Christa Avatar asked Apr 12 '10 15:04

Jason Christa


People also ask

How many attributes does IMG tag have?

The <img> tag has two required attributes: src - Specifies the path to the image. alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed.

What is img src attribute?

The <img> src attribute is used to specify the URL of the source image. Syntax: <img src="URL"> Attribute Values: It contains single value URL which specifies the link of source image.

Why is the src attribute necessary in an IMG tag?

The required src attribute specifies the URL of the image. There are two ways to specify the URL in the src attribute: 1. Absolute URL - Links to an external image that is hosted on another website.


2 Answers

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

like image 129
Konstantin Smolyanin Avatar answered Sep 20 '22 12:09

Konstantin Smolyanin


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)

like image 30
SLaks Avatar answered Sep 21 '22 12:09

SLaks