[解決済み】Reactでローカルの画像を参照するにはどうすればいいですか？

質問

ローカルディレクトリから画像をロードし、それを reactjs img src タグを使用することはできますか？

という画像を持っています。 one.jpeg コンポーネントと同じフォルダにある <img src="one.jpeg" /> と <img src={"one.jpeg"} /> の中に、私の render 関数を使用していますが、画像が表示されません。また、私は webpack config プロジェクトは、公式の create-react-app コマンドライン・ユーティリティを使用します。

更新：これは、最初に画像を import img from './one.jpeg' の中で使用します。 img src={img} が、インポートする画像ファイルが多いので、フォームの中で使いたい。 img src={'image_name.jpeg'} .

解決方法は？

まず、src を {}

次に、Webpackを使用する場合。 の代わりに <img src={"./logo.jpeg"} />

requireを使用する必要があるかもしれません。

<img src={require('./logo.jpeg')} />

もう一つの方法は、まずこのような画像を取り込むことです。

import logo from './logo.jpeg'; // with import

または

const logo = require('./logo.jpeg); // with require

で、それを挿すと...

<img src={logo} />

特に画像ソースを再利用している場合は、このオプションをお勧めします。