I'm currently switching to vite with vuejs and have the following problem:
I have a ponent 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 ponent 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.
puted: {
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 ponents to the vue3 position API.
how can I simply load the images into an array and scroll through the ponent.
I'm currently switching to vite with vuejs and have the following problem:
I have a ponent 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 ponent 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.
puted: {
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 ponents to the vue3 position API.
how can I simply load the images into an array and scroll through the ponent.
Share Improve this question edited Apr 18, 2022 at 18:29 Nikola Pavicevic 23.5k9 gold badges29 silver badges51 bronze badges asked Jan 5, 2022 at 10:13 bluelemonadebluelemonade 1,3052 gold badges17 silver badges34 bronze badges 1-
Tried
import()
instead? – Anuga Commented Jan 5, 2022 at 10:23
2 Answers
Reset to default 6You 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)
I started using Vite and had the same problem. I read other people's advice and experimented. Here's an example using v-for, in case it helps others.
<template>
<div
v-for="item in items"
:key="item.id"
>
<img
:src="`${imageUrl}${item.image}.jpg`"
:alt="item.description"
>
</div>
</template>
<script>
export default {
setup() {
const imageUrl = new URL("../assets/images/", import.meta.url).href;
return { imageUrl };
},
props: {
items: {
type: Object,
default: function() {
return {};
},
},
},
};
</script>