Remplacement de require dans Vuejs 3 par Vite pour les tableaux d'images

Question

Je suis en train de passer à vite avec vuejs et j'ai le problème suivant :

J'ai un composant en débogage qui affiche les images d'un dossier :

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")
]

dans le composant est la div suivante

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

il y a ensuite la classe dynamique suivante avec de rich simple qui peut faire défiler les images.

computed: {
     bgClass: function () {

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

Requis n'est pas disponible dans Vite, et je ne voudrais pas convertir les anciens composants de vue2 à l'API de composition de vue3.

comment puis-je simplement charger les images dans un tableau et faire défiler le composant.

Answer 1

Vous pouvez créer une fonction :

Vérifier les documents du site

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

et créer une propriété globale (dans main.js) :

app.config.globalProperties.$image = useImage;

puis l'utiliser comme :

$image(imageUrl)