React.js의 올바른 이미지 경로
P粉024986150
2023-08-21 14:24:49
<p>내 React 프로젝트의 이미지에 몇 가지 문제가 있습니다. 사실 저는 항상 src 속성의 상대 경로가 파일의 스키마를 기반으로 구성되었다고 생각했습니다. </p>
<p>내 파일 구조는 다음과 같습니다.</p>
<pre class="brush:php;toolbar:false;">구성요소
파일1.jsx
파일2.jsx
파일3.jsx
컨테이너
img
JS
...</pre>
<p>그런데 URL을 기반으로 경로가 작성된다는 것을 깨달았습니다. 내 구성요소 중 하나(예: file1.jsx)에 다음 코드가 있습니다. </p>
<pre class="brush:php;toolbar:false;">localhost/details/2
<img src="../img/myImage.png" />
로컬호스트/세부정보/2/id
<img src="../img/myImage.png" /> -> 작동하지 않아 이미지를 표시할 수 없습니다</pre>
<p>이 문제를 어떻게 해결하나요? 반응 라우터가 처리하는 모든 라우팅 형식에서 모든 이미지가 동일한 경로로 표시되기를 원합니다. </p>
으아악create-react-app
에서는 상대 경로를 사용하여 이미지를 참조할 수 없는 것 같습니다. 대신 import를 사용하여 이미지를 가져올 수 있습니다.파일 시스템이 아닌 현재 URL에 상대적인 상대 URL을 사용하고 있습니다. 절대 URL을 사용하면 이 문제를 해결할 수 있습니다
<img src="http://localhost:3000/details/img/myImage.png" />
그러나 www.my-domain.bike 또는 기타 사이트에 배포하는 경우에는 이상적이지 않습니다. 더 나은 접근 방식은 사이트 루트에 상대적인 URL을 사용하는 것입니다
<img src="/details/img/myImage.png" />