CODEWITHSUNDEEP
htmlreactjs
StarBoy
StarBoy

Reputation: 154

picture tag in React

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?

Upvotes: 9

Views: 19069

Answers (2)

burak
burak

Reputation: 4064

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 />?

Upvotes: 9

Vishnu Shekhawat
Vishnu Shekhawat

Reputation: 1265

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

Upvotes: 0

Related Questions