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

3

7

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 💜

Jessiejessika answered 28/3, 2022 at 13:47 Comment(0)
S
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.

Signally answered 28/3, 2022 at 13:58 Comment(0)
E
4

const images = import.meta.glob("../assets/img/avatars/*")

This solution works for Vite

Ela answered 13/8, 2022 at 17:15 Comment(0)
D
2

you can create a function and get the url as a string.

function getImgUrl(fileName){
    let ext = '.png' // can be anything
    const imgUrl = new URL(`./assets/${fileName}.${ext}`, import.meta.url).href
    return imgUrl
}

 
<img src={getImgUrl(fileName)} alt=... />

You can refer the usage from https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url

Rest vite will take care fo taking from relative paths while dev and from assets during production

Differentiate answered 7/11, 2022 at 18:38 Comment(1)
works fine, but my filenames are numbers, so I changed the path with concatenation './assets/'+fileName+'.png'Sato
S
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.

Signally answered 28/3, 2022 at 13:58 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.