web-dev-qa-db-ja.com

Parceljsを使用して画像を動的に読み込む

ビルド時にイメージ名がわからない場合、parceljsbundleを使用してイメージを動的にロードすることは可能ですか？

小包にwebpackの require.context に似たものはありますか

コードスニペット（ReactとParcelを使用）これは正常に機能します

...
<img src={require('../images/Image4.jpg')}/>
...

ただし、式を使用すると、「キャッチされないエラー：モジュールが見つかりません」がスローされます。

...
var imgName = "Image4";
...
...
<img src={require('../images/' + imgName + '.jpg')}/>
...

画像-キャッチされていないエラー：モジュールが見つかりません

だから、私はこれを間違っていますか？小包でこれを行う他の方法はありますか

parceljs
10
Shashank Vinayak

私はこれが現在可能であるとは思わない、ivがそれを回避する1つのハッキーな方法はこれを行うことです：

import icons from './assets/icons/**'

const icon_file_name = 'user'
const specificIcon = icons[`${icon_file_name}.png`]

<img src={specificIcon} />
7
Luke Robertson

Luke Robertson の回答に基づいて、同様のハックを試しましたが、うまくいきました。

import images from '../assets/cover/images/*.jpg';
const file_name = "file-name"
<img src=`${images[file_name]}` />
1
Glance