인프런 커뮤니티 질문&답변
작성한 질문수
리액트에서 picture 사용법
작성
·
155
0
혹시 리액트에서 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>
이렇게 사용이 가능한지 알고 싶습니다.
답변
답변을 기다리고 있는 질문이에요
첫번째 답변을 남겨보세요!