내 React 앱에 로컬 이미지가 로드되지 않는 이유는 무엇입니까?

React 앱에서 로컬 이미지가 로드되지 않음

React에서는 외부 이미지가 로드되는 데 로컬 이미지가 로드되지 않는 문제가 흔히 발생합니다. 이 문제는 프런트 엔드 코드를 최적화하고 패키징하는 번들러인 Webpack을 사용할 때 발생할 수 있습니다.

문제 이해

Webpack에는 이미지와 같은 자산이 번들 코드. 기본적으로 명시적인 포함 없이는 로컬 이미지를 인식하지 못합니다. 이는 Webpack이 이미지를 모듈로 가져와 처리하고 최적화할 수 있기를 기대하기 때문입니다.

해결책: 로컬 이미지 요구

문제를 해결하려면 다음이 필요합니다. React 구성 요소에 로컬 이미지가 필요합니다. 다음을 바꿉니다:

<img src={"/images/resto.png"} />

다음으로:

<img src={require('/images/resto.png')} />

이미지를 요구하면 해당 이미지를 Webpack 번들에 명시적으로 포함하여 소스 경로를 처리하고 올바른 번들로 바꿀 수 있습니다. 유산. 이런 방식으로 React는 컴파일된 코드에서 로컬 이미지를 성공적으로 로드할 수 있습니다.

이러한 수정을 수행하면 아무런 문제 없이 React 애플리케이션에서 로컬 이미지를 로드할 수 있습니다.

위 내용은 내 React 앱에 로컬 이미지가 로드되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!