React.js에서 React Router의 이미지 경로 문제를 해결하는 방법은 무엇입니까?

React.js의 Img 경로 확인

React.js에서 요소에는 이미지의 URL이 포함될 것으로 예상됩니다. 그러나 특히 React Router의 맥락에서 상대 경로가 올바르게 확인되지 않는 경우도 있습니다.

다음 파일 구조를 고려하세요.

components
    file1.jsx
    file2.jsx
    file3.jsx
container
img
js 
... 

file1.jsx에서 , 다음 코드는 이미지를 표시하는 데 사용됩니다.

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

localhost/details/2/id
<img src="../img/myImage.png" /> <!-- doesn't work -->

관찰한 것처럼 상대 경로는 첫 번째 경우에는 작동하지만 두 번째 경우에는 작동하지 않습니다. 이는 파일 아키텍처가 아닌 URL을 기반으로 상대 경로가 확인되기 때문입니다.

경로에 관계없이 이미지가 올바르게 표시되도록 하려면 다음 구문을 사용하여 이미지를 가져오는 것이 한 가지 해결책입니다.

import logo from './logo.png' // relative path to image 

class Nav extends Component { 
    render() { 
        return ( 
            <img src={logo} alt={&quot;logo&quot;}/> 
        )  
    }
}

이미지를 가져오면 해당 이미지가 번들 리소스이고 현재 경로에 관계없이 모든 구성 요소에서 사용할 수 있음을 보장하게 됩니다.

위 내용은 React.js에서 React Router의 이미지 경로 문제를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!