使用 Parceljs 动态加载图像

Posted 2023-02-23

【中文标题】使用 Parceljs 动态加载图像

【英文标题】：Loading images dynamically with Parceljs

【发布时间】：2018-06-30 03:32:09

【问题描述】：

如果在构建时不知道图像名称，是否可以使用 parceljs 捆绑器动态加载图像

包裹里有没有类似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

那么，我做错了吗？有没有其他方法可以用包裹做到这一点

【问题讨论】：

分享你到目前为止所做的事情（代码、错误等）以及你遇到问题的地方。

【参考方案1】：

我认为目前这是不可能的，我解决它的一种 hacky 方法是：

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

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

<img src=specificIcon />

【讨论】：

试过了，但我收到一个错误：数据必须是字符串或缓冲区。有什么想法吗？

【参考方案2】：

基于Luke Robertson 的回答尝试了类似的破解，它对我有用：

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