CODEWITHSUNDEEP
htmlreactjs
user9048123
user9048123

Reputation:

Does the picture tag dislike React?

This question has been asked before but there was no given solution. At least nothing that worked for my problem.

In React, the picture tag does not work. It is written in plain html in JSX. No functions, no variables, etc. Just plain hard coded tags.

It had failed to load local images as well as online images.

I had copied the very same html in the JSX file and pasted into an html file. The html file rendered without fail.

This is the code snippet below was the that could render in a html file but not a jsx file through React.

<picture className="dice">
  <source id="img512" className="img512" media="" srcSet="./512x512.png" />
  <source id="img256" className="img256" media="" srcSet="./256x256.png" />
  <source id="img144" className="img144" media="" srcSet="./144x144.png" />
  <source id="img96" className="img96" media="" srcSet="./96x96.png" />
  <img src="./512x512.png" alt="Icon" />
</picture>

I have tried a single source tag. I have tried removing every attribute exluding srcSet. I have tried using src instead of srcSet and also tried srcset. All have failed rendering an image. The only thing that rendered was the alt text.

Am I missing something here? Is there something that React doesn't like what I have done here?

Here is a link of the post I initially had read before posting: picture tag in React

Update:

So as "Jesper We" mentioned I be using className instead of class. I personally already knew that this was a common mistake and would have caught this mistake. Since I posted the wrong code early I had ran the code again for the sake of confirmation. Still a no pictures unfortunately

I worked towards "Robin's" comment and check out his suggestion. I copied the code he provided in the link and pasted it into my code. Everything was working. Then I filled in the media queries of my original code. Oddly enough it did not work. Then I used other online images then those images worked. I had tried both png and jpg images and the both worked. Then I used my own images again that were png images and none of them worked.

Now it looks like there something wrong with the images I have but I think problem now no longer revolves around the code. I hope...

Upvotes: 0

Views: 2191

Answers (2)

S3D
S3D

Reputation: 139

        <picture>
            <source media="(min-width: 650px)" srcset="logo.png" width="170" height="100"/>
            <img src="smallLogo.png" alt="smallLogo"  width="50" height="50" />
        </picture>

Upvotes: 0

Robin
Robin

Reputation: 5427

You need to modify your code, then it will work perfectly, see this code https://stackblitz.com/edit/react-jessyq

Resize the output window, you will see the different images for different sizes. Hope your problem will be solved. HAPPY CODING :)

picture tag is used for responsive image, As far i know image will be change according to device width. For this purpose you should use picture tag with media query like this

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

For Details: https://www.w3schools.com/tags/tag_picture.asp

And you can't use class in react, use className instead of class.

Upvotes: 3

Related Questions