如何使用 Parcel JS 从文件夹中导入所有图像答案

【问题标题】：How to import all images from a folder with Parcel JS如何使用 Parcel JS 从文件夹中导入所有图像
【发布时间】：2021-04-22 12:02:43
【问题描述】：

我可以花一个小时解释我的代码和我尝试过的所有内容，但绝对基础是这样的：

加载时，我的脚本为types 数组中的每个type 创建按钮：

for(let type of types) {
        let btn = document.createElement('button');
        btn.innerHTML = `<img class="type-icon" src="img/types/${type.name}.svg"> `;

我有一个名为 img 的文件夹，其中有一个名为 types 的文件夹，其中存储了 18 个“类型”图标，用于“火”、“水”等。

有没有办法用 parcel JS 动态地做到这一点？

目前，图片全部丢失。我试过导入*，但这似乎不适用于 Parcel。我试过动态地要求它们，也不起作用。我知道 Parcel 可能会查找要导入的文件的名称，并在生成的脚本中用文件名替换这些名称......有没有办法用静态资产做到这一点？我的 json 文件也有同样的问题，我花了一段时间才发现我需要删除所有的 fetch 代码并导入它们。有没有办法与 Parcel 保持相同的文件名？似乎没有，但如果它没有合并文件，我不明白为什么不......

【问题讨论】：

标签： javascript parceljs

【解决方案1】：

所以我今天遇到了同样的问题。这显然是一个已知问题：https://github.com/parcel-bundler/parcel/issues/1411

我使用了链接插件，它工作正常：https://www.npmjs.com/package/parcel-plugin-static-files-copy

将所有图像添加到名为 static 的文件夹中，您可以使用它们在本地的相同名称访问它们（在 uri 中没有 static）。

【讨论】：

因为，这个插件不好用。