使用Parceljs动态加载图像

Question

当构建时不知道图像名称时，是否可以使用parceljs bundler动态加载图像

包裹里有没有和webpack的require.context类似的东西？

代码片段(使用React和Parcel)这很好用

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

但是如果使用表达式，它会抛出“未捕获错误:找不到模块”

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

Image - Uncaught Error: Cannot find module

那么，我做错了吗？有没有其他方法来处理包裹呢？

Answer 1

我认为这目前是不可能的，一种老套的方法iv解决它，是这样做：

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

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

<img src={specificIcon} />

Answer 2

基于Luke Robertson answer尝试了类似的黑客攻击，它对我有效：

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