React.jsでローカル画像を読み込む

質問

Reactをインストールするのに create-react-app . うまくインストールできましたが、コンポーネントのひとつに画像を読み込もうとしています ( Header.js , ファイルパス: src/components/common/Header.js というように書きましたが、読み込まれません。以下は私のコードです。

import React from 'react'; 

export default () => {
  var logo1 = (
    <img 
      //src="https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-goose.jpg"
      src={'/src/images/logo.png'}
      alt="Canvas Logo"
    />
  );
  return (
    <div id="header-wrap">
      <div className="container clearfix">
        <div id="primary-menu-trigger">
          <i className="icon-reorder"></i>
        </div>
                    
        <div id="logo">
          <a href="/" className="standard-logo" data-dark-logo='/images/logo-dark.png'>{logo1}</a>
          <a href="/" className="retina-logo" data-dark-logo='/images/[email protected]'>
            <img src='/var/www/html/react-demo/src/images/[email protected]' alt="Canvas Logo" />
          </a>
        </div>
      </div>
    </div>
  );
} 

画像のパスを src={require('./src/images/logo.png')} と書くと logo1 という変数がある場合、エラーが発生します。

コンパイルに失敗しました。

./src/Components/common/Header.jsでエラーとなりました。

モジュールが見つかりません: ./src/images/logo.png in /var/www/html/wistful/src/Components/common

私がこれを解決するのを助けてください。私はここで何が間違っているのかを教えてください。

どのように解決するのですか？

を作成する際に疑問がある場合 React App を読むことをお勧めします。 ユーザーガイド .

このほかにも多くの質問にお答えしています。

具体的には、ローカル画像を含めるために、2つのオプションがあります。

1. インポートを使用 :

    // Assuming logo.png is in the same folder as JS file
    import logo from './logo.png';
   
    // ...later
    <img src={logo} alt="logo" />
   
   

このアプローチは、すべてのアセットがビルドシステムによって処理され、本番ビルドでハッシュを持つファイル名を取得するため、素晴らしいものです。また、ファイルが移動または削除された場合、エラーが発生します。

欠点は、任意のインポートパスを持つことができないので、何百もの画像がある場合、面倒になる可能性があることです。

1. 公開フォルダを使用します。

    // Assuming logo.png is in public/ folder of your project
    <img src={process.env.PUBLIC_URL + '/logo.png'} alt="logo" />
   
   

この方法は一般的には推奨されませんが、何百もの画像があり、それらを一つずつインポートするのが面倒な場合には、とてもよい方法です。欠点は、キャッシュの破壊について考え、移動または削除されたファイルに自分で注意しなければならないことです。

これが役に立つことを願っています。