如何使用 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

據我所知，您不能（默認情況下）。

通常如果你需要一個完整的目錄，你會在后端有一些東西返回該目錄中的所有文件（通常為 JSON），然后你基本上可以繼續加載它們。

如果它是在構建時修復的（我猜這是因為你有辦法用 webpack 做到這一點），你可能會寫一個簡單的Vite 插件來支持它，基本上將一些東西轉換成你的示例顯示的內容，它在哪里'd 將每個路徑放入一個數組中。

Answer 2

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

此解決方案適用於 Vite