import.meta.glob() 只能接受字符串文字

Question

我有一个 vite vue3 项目。在组件中，我尝试从文件夹中获取所有图像的 URL。当我写作时它有效

const images = import.meta.globEager("/src/resources/projects/images/Project1/*.png")

并在模板中

<img v-for="(item, key) in images" :key="key" :src="key" />

但每个组件都有不同的文件夹，当我编写时

const imageFolderUrl = "/src/resources/projects/images/" + this.projectName + "/*.png";
const image = import.meta.globEager (imageFolderUrl);

我收到错误import.meta.glob()“只能接受字符串文字”。如何从具有动态文件夹名称的文件夹加载所有图像 url？

Answer 1

我试图用 Sveltekit 做同样的事情。

有信息https://github.com/vitejs/vite/issues/5478

一种快速解决方法是将任何可能的文件夹名称作为 switch/case 语句中的一种可能性写入。

let images;
switch (imageFolderUrl) {
  case "Project1": images = import.meta.globEager("/src/resources/projects/images/Project1/*.png");
  case "Project2": images = import.meta.globEager("/src/resources/projects/images/Project2/*.png");
  ...
}

它远非漂亮，但如果您只想避免导入所有内容/**/*.png并按路径过滤，它就可以工作。