CODEWITHSUNDEEP
javascriptvue.jsvuejs3vite
bluelemonade
bluelemonade

Reputation: 1295

Replacement for require in Vuejs 3 with Vite for image array

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.

Upvotes: 7

Views: 7404

Answers (2)

Sean Kelliher
Sean Kelliher

Reputation: 171

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>

Upvotes: 0

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23480

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)

Upvotes: 6

Related Questions