import
src
폴더 밑에 이미지 넣기import imgLogo from './imgTest.jpg';
<img>
태그 안에 src={imgLogo}
로 이미지를 연결함function App() {
return (
<div>
<img src={imgLogo} alt='logo image' />
</div>
);
}
src
는 'imgLogo'로 하면 안됨src='imgLogo'
는 /imgLogo 경로로 찾아가기 때문에 오류 발생{}
안에 넣어야 함.image-bg {
height : 300px;
background-image : url('./imgTest.jpg');
background-size : cover;
background-position : center;
}
background-image
에 url
을 통해 src 파일의 이미지를 연결함function App() {
return (
<div className="image-bg"></div>
);
}
public
폴더에서 가져오기public
폴더에 있는 이미지는 import
문 작성 안해도 됨http://localhost:3000/img/imgTest.jpg
라고 입력하면 열림public
폴더에 저장해도 됨<img>
태그에 연결하기function App() {
return (
<div>
<img src="/img/imgTest.jpg" alt='logo image' />
</div>
);
}
<img>
태그 안에 src에 이미지 경로를 연결함<img src={process.env.PUBLIC_URL + '/img/imgTest.jpg'} alt='logo image'/>
process.env.PUBLIC_URL
를 붙여야 함해당 내용은 다음 자료를 참고했습니다.
https://daveceddia.com/react-image-tag/
https://create-react-app.dev/docs/using-the-public-folder/