26

When I have the srcset property on my <img /> tag, why doesn't it show up in the browser? It appears as through React.js is stripping it out.

<img src="/images/logo.png" srcset="/images/logo-1.5x.png 1.5x, /images/logo-2x.png 2x" />
Kevin Ghadyani
  • 6,829
  • 6
  • 44
  • 62

4 Answers4

79

The solution is to use srcSet instead of srcset.

<img src="/images/logo.png" srcSet="/images/logo-1.5x.png 1.5x, /images/logo-2x.png 2x" />

Reference: https://facebook.github.io/react/docs/tags-and-attributes.html under HTML Attributes

Kevin Ghadyani
  • 6,829
  • 6
  • 44
  • 62
  • how can this be a react solution? where is the import anyway? Can you really deploy with the above code? – windmaomao Jul 19 '22 at 16:22
  • In React, you have JSX. This allows you to write something similar to HTML, then Babel or any other transpiler uses a special React plugin to convert it to JavaScript. Yes, this can be used in production. No import needed. – Kevin Ghadyani Jul 19 '22 at 17:07
8

Another ugly solution using template literals:

<img
  alt=''
  src={require('../../assets/images/logo/logo.png')}
  srcSet={`
    ${require('../../assets/images/logo/logo@2x.png')} 2x, 
    ${require('../../assets/images/logo/logo@3x.png')} 3x
  `}
/>
Milan Rakos
  • 1,705
  • 17
  • 24
  • You can make it pretty if you import the file in the top – Stephane L Jul 25 '20 at 12:13
  • @StephaneL Would that mean you're importing the images on every browser though? – Sam Jun 21 '21 at 18:35
  • @Sam no, Webpack resolves the imports of images (or require) as a string (the uri of the image). The image data will just be fetched when the browser requests it and the browser will decide which image it needs according to `srcSet`. – Stephane L Jun 22 '21 at 10:15
3

Tried to use srcSet with a string didn't work for me probably because how Webpack works so in the end, imported them and include them with the template string as in the next example:

import nat1 from "./img/nat-1.jpg";
import nat1Large from "./img/nat-1-large.jpg";
import nat2 from "./img/nat-2.jpg";
import nat2Large from "./img/nat-2-large.jpg";
import nat3 from "./img/nat-3.jpg";
import nat3Large from "./img/nat-3-large.jpg";


  <div className="composition">
                <img
                  srcSet={`${nat1} 300w, ${nat1Large} 1000w`}
                  sizes="(max-width: 56.25em) 20vw, (max-width: 37.5em) 30vw, 300px"
                  alt="Photo 1"
                  className="composition__photo composition__photo--p1"
                  src={nat1Large}
                />
                <img
                  srcSet={`${nat2} 300w, ${nat2Large} 1000w`}
                  sizes="(max-width: 56.25em) 20vw, (max-width: 37.5em) 30vw, 300px"
                  alt="Photo 2"
                  className="composition__photo composition__photo--p2"
                  src={nat2Large}
                />
                <img
                  srcSet={`${nat3} 300w, ${nat3Large} 1000w`}
                  sizes="(max-width: 56.25em) 20vw, (max-width: 37.5em) 30vw, 300px"
                  alt="Photo 3"
                  className="composition__photo composition__photo--p3"
                  src={nat3Large}
                />
  </div>
Sergey Khodyachikh
  • 41
  • 4
1
import meal1x from '../images/meal.jpg';
import meal2x from '../images/meal@2x.jpg';
import meal3x from '../images/meal@3x.jpg';


 <img
    className='meal'
    src={meal1x}
    srcSet={`${meal1x} 1x, ${meal2x} 2x, ${meal3x} 3x `}
  />
qlian1000
  • 15
  • 1