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'}
。
ベストアンサー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} />
特に画像ソースを再利用する場合はこのオプションをお勧めします。