Reactでローカル画像を参照するにはどうすればいいですか? 質問する

Reactでローカル画像を参照するにはどうすればいいですか? 質問する

reactjs img srcローカルディレクトリから画像をロードしてタグに含めるにはどうすればよいですか?

one.jpegコンポーネントと同じフォルダー内にというイメージがあり、関数内で<img src="one.jpeg" />もを試しましたが、イメージが表示されません。また、プロジェクトは公式のコマンドライン ユーティリティを使用して作成されているため、ファイルにアクセスできません。<img src={"one.jpeg"} />renderwebpack configcreate-react-app

更新: 最初に で画像をインポートしてimport img from './one.jpeg'内で使用すると機能しますimg src={img}が、インポートする画像ファイルが非常に多いため、 という形式でそれらを使用したいと思いますimg src={'image_name.jpeg'}

ベストアンサー1

まず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} />

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

おすすめ記事