How can I import all the images from a folder into an array with React builded in Vite?

Question

Hello guys I have this component in my React app builded with 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;

I need to import all my images at once, someone knows how to do that? I have tried things like

const templates = require.context('../assets/img/avatars', true, /\.(jpg|jpeg)$/);

but as long as i'm not using webpack it's not working, ¿any help? thanks 💜

Answer 1

As far as I know, you can't (with anything default).

Usually if you need a full directory of something, you'd have something on the backend return all the files in that directory (usually as JSON), then you can basically proceed with loading them all up.

If it's fixed at build-time (which I'm guessing it is since you had a way to do this with webpack), you could probably write a simple Vite plugin to back it, converting something into basically what your example shows, where it'd put in each path into an array.