내 React 앱에서 로컬 이미지를 로드할 수 없는 이유는 무엇입니까?-JS 튜토리얼-php.cn

내 React 앱에서 로컬 이미지를 로드할 수 없는 이유는 무엇입니까?

Susan Sarandon

풀어 주다： 2024-11-16 19:20:03

원래의

821명이 탐색했습니다.

Why Can't I Load Local Images in My React App?

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

배경:

로컬 이미지가 React 앱에서 로드되지 않는 경우가 있음 외부 이미지가 성공적으로 렌더링되었습니다. 특히 디자인과 기능을 로컬 이미지에 의존하는 개발자에게는 이는 실망스러운 문제가 될 수 있습니다.

문제 해결:

문제는 종종 이미지 소스 방식에 있습니다. React 애플리케이션에서. 그 이유는 다음과 같습니다.

Webpack 통합: React 프로젝트에서 Webpack을 사용할 때 Webpack이 소스 경로를 처리하고 교체하기 전에 이미지가 명시적으로 요구되어야 합니다.
파일 경로 문제: src 속성에 이미지에 대한 상대 또는 절대 파일 경로를 제공하는 것만으로는 작동하지 않습니다.

해결책:

이 문제를 해결하려면 require() 함수를 사용하여 로컬 이미지를 가져오세요. 예는 다음과 같습니다.

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div className="home-container">
                <div className="home-content">
                    <div className="home-text">
                        <h1>foo</h1>
                    </div>
                    <div className="home-arrow">
                        <p className="arrow-text">
                            Vzdělání
                        </p>
                        <img src={require('/images/resto.png')} />
                    </div>
                </div>
            </div>
        );
    }
}

export default App;

로그인 후 복사

require('/images/resto.png')를 사용하면 Webpack에 이미지를 처리하고 이에 따라 소스 경로를 바꾸도록 지시합니다. 이렇게 하면 이미지가 애플리케이션에 올바르게 로드되고 표시됩니다.

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