如何使用 Vite 中构建的 React 将文件夹中的所有图像导入数组？

Question

大家好，我在用 Vite 构建的 React 应用程序中有这个组件

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;

我需要一次导入所有图像，有人知道该怎么做吗？我尝试过

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

但只要我不使用 webpack，它就无法正常工作，有什么帮助吗？谢谢

Answer 1

据我所知，你不能（使用任何默认设置）。

通常如果你需要一些东西的完整目录，你会在后端有一些东西return那个目录中的所有文件（通常是JSON），然后你基本上可以继续加载它们。

如果它固定在 build-time（我猜这是因为你有办法用 webpack 做到这一点），你可能会写一个简单的 Vite plugin 来支持它，转换基本上你的示例显示的内容，它将每个路径放入数组的位置。

如何使用 Vite 中构建的 React 将文件夹中的所有图像导入数组？

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

javascript

import

reactjs

vite