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.
You can create function:
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)