React アプリにローカル イメージをロードできないのはなぜですか?

ローカル画像が 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 中国語 Web サイトの他の関連記事を参照してください。