Replacement for require in Vuejs 3 with Vite for image array

Question

I'm currently switching to vite with vuejs and have the following problem:

I have a component in debugging that displays images from a folder:

imageArray: [
     require ("../ assets / dummies / Mission -1.jpg"),
     require ("../ assets / dummies / Mission -2.jpg"),
     require ("../ assets / dummies / Mission -3.jpg"),
     require ("../ assets / dummies / Mission -4.jpg")
]

in the component is the following div

<div: class = "bgClass" v-if = "isDebug () == true"> </div>

there is then the following dynamic class with de rich simple that can scroll through the images.

computed: {
     bgClass: function () {
      
       return {
           backgroundImage: 'url (' + this.imageArray [this.imagePos] + ')',
           ...
       }
     }
   }

Required is not available in Vite, and I would not like to convert the old vue2 components to the vue3 composition API.

how can I simply load the images into an array and scroll through the component.

Answer 1

You can create function:

check vite docs

const useImage = ((url) => {
  return new URL(`/src/${url}`, import.meta.url).href;
});

and create global property (in main.js):

app.config.globalProperties.$image = useImage;

then use it like:

$image(imageUrl)