내 로컬 이미지가 React 애플리케이션에 로드되지 않는 이유는 무엇입니까?

React 애플리케이션에서 로컬 이미지를 로드하지 못하는 경우

React 애플리케이션을 개발할 때 로컬에 저장된 이미지가 표시되지 않는 문제가 사용자에게 발생할 수 있습니다. 외부에서 호스팅되는 이미지(예: placehold.it/200x200)를 성공적으로 렌더링했음에도 불구하고 로컬 이미지는 여전히 파악하기 어렵습니다. 이를 해결하려면 서버 구성을 자세히 살펴보는 것이 중요합니다.

애플리케이션 코드 검사

App.js, index.js, 서버에 대해 제공되는 코드입니다. Node.js는 명백한 이상 현상 없이 표준으로 보입니다. 그러나 App.js 내의 이미지 소스를 조사하면 문제의 근본 원인을 알 수 있습니다.

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

Webpack 해상도

Webpack을 활용하는 경우 사용자 정의 이미지는 반드시 도구가 이를 처리하는 데 명시적으로 필요합니다. 현재 사용법에서는 Webpack이 "/images" 디렉터리에서 이미지를 찾아 표시해야 합니다. 이 단계가 없으면 Webpack은 로컬 이미지를 무시하므로 애플리케이션에서 해당 이미지가 누락됩니다.

필요한 수정

문제를 해결하려면 현재 이미지 소스를 다음 구문:

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

이미지를 요구함으로써 Webpack은 이제 App.js의 원본 소스를 처리하고 올바른 소스로 바꿀 수 있습니다. 이미지를 생성하여 로컬 이미지를 의도한 대로 표시할 수 있습니다.

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