Hola chicos, tengo este componente en mi aplicación React creado con Vite
import img1 from "../assets/img/avatars/avatar-1.svg"; import img2 from "../assets/img/avatars/avatar-2.svg"; import img3 from "../assets/img/avatars/avatar-3.svg"; import img4 from "../assets/img/avatars/avatar-4.svg"; import img5 from "../assets/img/avatars/avatar-5.svg"; import img6 from "../assets/img/avatars/avatar-6.svg"; import img7 from "../assets/img/avatars/avatar-7.svg"; import img8 from "../assets/img/avatars/avatar-8.svg"; const Avatar = () => { const imgPaths = [img1, img2, img3, img4, img5, img6, img7, img8]; const randomAvatar = Math.floor(Math.random() * imgPaths.length); return ( <> <img className={css.default} src={`${imgPaths[randomAvatar]}`} alt={`Avatar numero ${randomAvatar}`} /> </> ); }; export default Avatar;Necesito importar todas mis imágenes a la vez, ¿alguien sabe cómo hacerlo? He probado cosas como
const templates = require.context('../assets/img/avatars', true, /\.(jpg|jpeg)$/);pero mientras no estoy usando webpack no funciona, ¿alguna ayuda? gracias 💜
Hasta donde yo sé, no puedes (con nada por defecto).
Por lo general, si necesita un directorio completo de algo, tendrá algo en el back-end que devuelva todos los archivos en ese directorio (generalmente como JSON), luego básicamente puede proceder a cargarlos todos.
Si se solucionó en el momento de la compilación (que supongo que es porque tenía una forma de hacerlo con el paquete web), probablemente podría escribir un complemento Vite simple para respaldarlo, convirtiendo algo básicamente en lo que muestra su ejemplo, donde Pondría cada ruta en una matriz.