javascript - 如何使用 Parcel JS 从文件夹导入所有图像

Question

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

Onload，我的脚本为 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 可能会查找要导入的文件的名称，并在生成的脚本中将这些名称替换为文件名...有没有办法使用静态 Assets 来执行此操作？我的 json 文件也遇到了同样的问题，我花了一段时间才发现我需要删除所有的获取代码并导入它们。有没有办法让 Parcel 保持相同的文件名？似乎不存在，但如果它没有合并文件，我不明白为什么不......

Answer 1

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

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

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