/Javascript/React/Syntax for srcset in react

Syntax for srcset in react

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>

Source: stackoverflow.com

Similar codes

64 votes155 views4 answers
How to install react-router-dom in react js
Javascript React
0 vote168 views1 answer
Background image in react from variable
Javascript React
0 vote163 views1 answer
React native skeleton
Javascript React
1 vote150 views1 answer
React native textinput no keyboard
Javascript React
16 votes165 views1 answer
Deploy react app netlify
Javascript React
3 votes183 views2 answers
Whatare portals in react
Javascript React
0 vote158 views1 answer
React-select-search useSelect hook
Javascript React
1 vote161 views1 answer
Unexpected token. did you mean `{'>'}` or `>`? react
Javascript React
0 vote148 views1 answer
Bootstrap modal disable close on click outside react bootstrap
Javascript React
0 vote163 views3 answers
Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
Javascript React