리액트에서 picture 사용법

혹시 리액트에서 picture, source를 사용하는 방법을 아실까 해서 질문 남겨봅니다.

아래 코드와 같이 리액트에서 응용해보았는데, 화면에는 이미지가 나오지 않습니다.

img 태그를 썼을 때는 정상적으로 보입니다.

import React from 'react';
import Image1 from './images/image.png';
import Image2 from './images/image@2x.png';
import Image3 from './images/image@3x.png';

function App() {
 return (
 <picture>
 <source
 src={Image1}
 srcSet={`${Image2} 2x, ${Image3} 3x`}
 type="image/png"
 />
 </picture>
);
}

export default App;

그리고 지금은 source의 src에 기본 이미지를, srcSet에는 화소 밀도가 두배, 세배인 이미지를 넣는 방식으로 사용하였는데,
src를 사용하지 않고 srcset에만 모두 넣어 사용이 가능한지도 궁금합니다.
예를 들어,

<picture>
 <source media="(min-width: 45em)" srcSet="large.jpg, large-hd.jpg 2x" />
 <source media="(min-width: 18em)" srcSet="med.jpg, med-hd.jpg 2x" />
 <source srcSet="small.jpg, small-hd.jpg 2x" />
 <img src="small-1.jpg" alt="rwd" />
</picture>

이렇게 사용이 가능한지 알고 싶습니다.

Cộng đồng Hỏi & Đáp của Inflearn