javascript - import.meta.glob() can only accept string literals - Stack Overflow

admin管理员组

文章数量:1349704

I have a vite vue3 project. In the ponent I try to get the URL of all images from a folder. It works when I write

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

and in a template

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

but each ponent has a different folder and when I write

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

i get the error import.meta.glob() can only accept string literals". How can I load all images url from folder with a dynamic folder name?

I have a vite vue3 project. In the ponent I try to get the URL of all images from a folder. It works when I write

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

and in a template

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

but each ponent has a different folder and when I write

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

i get the error import.meta.glob() can only accept string literals". How can I load all images url from folder with a dynamic folder name?

• javascript
• vue.js
• vite

Share Improve this question Follow edited May 7, 2022 at 8:53 Nikola Pavicevic 23.5k99 gold badges2929 silver badges5151 bronze badges asked May 1, 2022 at 13:11 m470m470 6311 gold badge11 silver badge66 bronze badges 1

• 2 You could attempt to load all resources for all projects with /src/resources/projects/images/*/*.png. – user19015424 Commented May 3, 2022 at 12:37

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

I was trying to do the same thing with Sveltekit.

There's info at https://github./vitejs/vite/issues/5478

A quick workaround is to write any possible foldername as one possiblity in a switch/case statement.

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");
  ...
}

It's far from pretty, but it works if all you want is to avoid importing all /**/*.png and filtering down by path.

本文标签： javascriptimportmetaglob() can only accept string literalsStack Overflow