Reemplazo de require en Vuejs 3 con Vite para un arreglo de imágenes.

Actualmente estoy cambiando a Vite con Vue.js y tengo el siguiente problema:

Tengo un componente en depuración que muestra imágenes de una carpeta:

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

En el componente está el siguiente div:

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

Luego está la siguiente clase dinámica con la rica lógica que puede desplazarse por las imágenes:

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

Require no está disponible en Vite, y no me gustaría convertir los antiguos componentes de Vue 2 a la API de composición de Vue 3.

¿Cómo puedo cargar simplemente las imágenes en un array y desplazarme por el componente?

davy.ai

August 2, 2023 at 9:28 am

Dado que require no está disponible en Vite, puedes usar la declaración import para cargar las imágenes en un array. Aquí tienes un ejemplo:

const imageArray = [
  import('../assets/dummies/Mission-1.jpg'),
  import('../assets/dummies/Mission-2.jpg'),
  import('../assets/dummies/Mission-3.jpg'),
  import('../assets/dummies/Mission-4.jpg')
];

Luego, puedes usar un bucle v-for para mostrar las imágenes y una propiedad data para realizar un seguimiento de la posición actual de la imagen:

<template>
  <div :class="bgClass"></div>
</template>

<script>
export default {
  data() {
    return {
      images: [],
      imagePos: 0
    };
  },
  async created() {
    this.images = await Promise.all(imageArray);
  },
  computed: {
    bgClass() {
      return {
        backgroundImage: `url(${this.images[this.imagePos].default})`
      };
    }
  }
};
</script>

En este ejemplo, el gancho de ciclo de vida created se utiliza para cargar de forma asíncrona las imágenes en el array images. La propiedad default de la imagen se utiliza para obtener la URL real de la imagen. La propiedad computada bgClass se modifica para usar el array this.images en lugar de this.imageArray, y la propiedad de datos imagePos se utiliza para realizar un seguimiento de la posición actual de la imagen. Puedes implementar un método para actualizar la propiedad imagePos y crear un botón u otro elemento para activarlo y desplazarte por las imágenes.

Answer

davy.ai

August 2, 2023 at 9:28 am
Dado que require no está disponible en Vite, puedes usar la declaración import para cargar las imágenes en un array. Aquí tienes un ejemplo:
```
const imageArray = [
  import('../assets/dummies/Mission-1.jpg'),
  import('../assets/dummies/Mission-2.jpg'),
  import('../assets/dummies/Mission-3.jpg'),
  import('../assets/dummies/Mission-4.jpg')
];
```
Luego, puedes usar un bucle v-for para mostrar las imágenes y una propiedad data para realizar un seguimiento de la posición actual de la imagen:
```
<template>
  <div :class="bgClass"></div>
</template>

<script>
export default {
  data() {
    return {
      images: [],
      imagePos: 0
    };
  },
  async created() {
    this.images = await Promise.all(imageArray);
  },
  computed: {
    bgClass() {
      return {
        backgroundImage: `url(${this.images[this.imagePos].default})`
      };
    }
  }
};
</script>
```
En este ejemplo, el gancho de ciclo de vida created se utiliza para cargar de forma asíncrona las imágenes en el array images. La propiedad default de la imagen se utiliza para obtener la URL real de la imagen. La propiedad computada bgClass se modifica para usar el array this.images en lugar de this.imageArray, y la propiedad de datos imagePos se utiliza para realizar un seguimiento de la posición actual de la imagen. Puedes implementar un método para actualizar la propiedad imagePos y crear un botón u otro elemento para activarlo y desplazarte por las imágenes.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Reemplazo de require en Vuejs 3 con Vite para un arreglo de imágenes.

Answer

davy.ai