React.js 프로젝트에서 이미지 경로를 올바르게 처리하는 방법은 무엇입니까?

React.js의 이미지 경로에 대한 올바른 접근 방식

React.js 프로젝트에서 이미지의 올바른 경로를 결정하는 것은 일반적인 과제였습니다. 전통적으로 프로젝트의 파일 구조에 따라 src 속성 내에서 상대 경로가 사용되었습니다. 그러나 create-react-app으로 빌드된 React.js 프로젝트에서는 이 접근 방식이 항상 작동하지 않을 수 있습니다.

이는 경로가 "/details/2일 때 이미지가 올바르게 표시되는 제공된 예에서 분명합니다. "이지만 "/details/2/id"인 경우에는 그렇지 않습니다. 이러한 불일치는 파일 아키텍처가 아닌 URL 구조를 기반으로 상대 경로를 해석하기 때문에 발생합니다.

이 문제를 해결하려면 React.js 프로젝트에서 이미지 경로를 정의하는 대체 방법을 권장합니다. src 속성에 상대 경로를 사용하는 대신 import 문을 사용하여 이미지를 가져올 수 있습니다. 예:

import logo from './logo.png';

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

이 접근 방식에서 import 문은 이미지 파일에 대한 상대 경로를 지정하고 이미지는 변수로 저장됩니다. 구성 요소를 렌더링할 때 이 변수는 이미지의 소스로 사용됩니다.

가져오기 프로세스 중에 상대 경로가 설정되므로 이 방법을 사용하면 React-router가 처리하는 여러 경로에서 이미지 경로가 일관되게 유지됩니다. 현재 URL 구조를 기반으로 하지 않습니다. 결과적으로, 액세스되는 특정 경로에 관계없이 모든 이미지가 올바르게 표시됩니다.

위 내용은 React.js 프로젝트에서 이미지 경로를 올바르게 처리하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!