-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
리액트에서 picture 사용법
21.10.12 16:15 작성 조회수 93
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>
이렇게 사용이 가능한지 알고 싶습니다.
답변을 작성해보세요.
답변 0