import.meta.glob() can only accept string literals

user_5882285 0
Viewed 1375

I have a vite vue3 project. In the component 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 component 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?

vite vue.js javascript
1 Answers

I was trying to do the same thing with Sveltekit.

There's info at https://github.com/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.

user_198749740
Related