React.js의 올바른 이미지 경로

Question

내 React 프로젝트의 이미지에 몇 가지 문제가 있습니다. 사실 저는 항상 src 속성의 상대 경로가 파일의 스키마를 기반으로 구성되었다고 생각했습니다.

내 파일 구조는 다음과 같습니다.

구성요소
    파일1.jsx
    파일2.jsx
    파일3.jsx
컨테이너
img
JS
...

그런데 URL을 기반으로 경로가 작성된다는 것을 깨달았습니다. 내 구성요소 중 하나(예: file1.jsx)에 다음 코드가 있습니다.

localhost/details/2
<img src="../img/myImage.png" />

로컬호스트/세부정보/2/id
<img src="../img/myImage.png" /> -> 작동하지 않아 이미지를 표시할 수 없습니다

이 문제를 어떻게 해결하나요? 반응 라우터가 처리하는 모든 라우팅 형식에서 모든 이미지가 동일한 경로로 표시되기를 원합니다.

Answer 1

create-react-app에서는 상대 경로를 사용하여 이미지를 참조할 수 없는 것 같습니다. 대신 import를 사용하여 이미지를 가져올 수 있습니다.

으아악

Answer 2

파일 시스템이 아닌 현재 URL에 상대적인 상대 URL을 사용하고 있습니다. 절대 URL을 사용하면 이 문제를 해결할 수 있습니다

<img src="http://localhost:3000/details/img/myImage.png" />

그러나 www.my-domain.bike 또는 기타 사이트에 배포하는 경우에는 이상적이지 않습니다. 더 나은 접근 방식은 사이트 루트에 상대적인 URL을 사용하는 것입니다

<img src="/details/img/myImage.png" />