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.

• javascript
• vue.js
• vuejs3
• vite

• Tried import()instead? – Anuga Commented Jan 5, 2022 at 10:23

2 Answers 2

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)

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>