picture tag in React

Question

I am trying to use picture Tag in react app (jsx file) but it doesn't seems to work. Here is my code

 <picture>
      <source media="(min-width: 1024px)" src="image_Desktop.png"/>
      <source media="(max-width: 768px)" src="image_Mobile.png"/>
      <source media="(min-width: 768px) and (max-width: 1024px)" src="image_Tab.png"/>
      <img src="image.png" alt="" styleName='brain-image'/>
 </picture>

I tried giving attribute as srcset/src both in source tag but still not working.Any solution for the above problem?

use srcset and make sure the image exist at the specified path, it should work. — Mayank Shukla, May 10 '17 at 06:47
In chrome, open the developer tools and open the Network tab. Filter to see Img only. Check the source of the requested image - is it correct? — Chris, May 10 '17 at 07:16
` ` In React this always falls back to the png file, even if the browser support the new webP format. What am I doing wrong? @BlahBlah In the example above, did you get it to work or not? — Josh Pittman, Nov 24 '18 at 07:48

score 9 · Answer 1 · edited May 23 '17 at 12:10

9

If you are using srcset instead of using srcSet (with capital), this could be your problem.

Here is the another problem caused by usage of srcset:

Why is React.js removing the srcset tag on <img />?

edited May 23 '17 at 12:10

Community

1
1

answered May 10 '17 at 08:46

burak

3,839
1
15
20

score 0 · Answer 2 · edited May 23 '17 at 12:34

As per the Official Doc :

The HTML <picture> element is a container used to specify multiple elements for a specific contained in it. The browser will choose the most suitable source according to the current layout of the page (the constraints of the box the image will appear in) and the device it will be displayed on (e.g. a normal or hiDPI device.

And img is a DOM element but a javascript expression.

Possibly duplicate of this React img tag issue with url and class

If this doesnt help you , please share the inspected HTML for this Component

picture tag in React

2 Answers2

Linked