✏️ React 이미지 경로 설정

1. src 디렉토리에서 이미지 가져오기

: src 폴더 안에 이미지를 넣으면 import 해줘서 사용해야함

// App.jsx

import exampleImage from './images/img1.jpg'

export default function App() {
	return(
    	<div>
        	<img src={exampleImage} alt='exampleImage'/>
        </div>
    )
}

2. css로 적용시키기

// App.css

.exampleImage {
	width: 300px;
    height: 300px;
    background: url('./images/img1.jpg') 0 0 no-repeat;
    background-size: cover;
}

// App.jsx

export default function App() {
	return(
    	<div>
        	<div clasName='exampleImage'></div>
        </div>
    )
}

3. public 디렉토리에서 이미지 가져오기

: src 폴더는 import 시켜줘야하지만 public은 그럴 필요 없다.

WHY?
"public 폴더 안의 파일들과 여러 소스들은 서버와 통신을 하기 때문이다"

예를 들어, url를 'http://localhost:3000/images/img1.jpg'라고 입력하면 그 이미지 파일이 열리면서 확인할 수 있다.

리액트를 빌드하면 src 폴더는 압축되지만 public 폴더는 그대로 보존한다.

// App.jsx

exprot default function App() {
	return(
    	<div>
        	<img src='/images/img1.jpg' alt='exampleImage' />
        </div>
    )
}

그리고 만약 서버로 배포할 경우라면,

<img src={process.env.PUBLIC_URL + '/images/img1.jpg'} alt='exampleImage' />

위처럼

process.env.PUBLIC_URL

을 붙여준다.

하지만, 배포할 때 'www.사이트.com'의 경로에서 'www.사이트.com/세부파일' 일 경우, 이미지를 찾기 어려울 수 있으므로 주의!

출처
https://daveceddia.com/react-image-tag/