如何无需逐个导入即可将public文件夹内的图片直接存入数组

通用方案（所有框架/构建工具通用） #

public目录下的资源本身支持直接通过路径访问，不需要导入为模块，你只需要维护一个文件名数组，拼接路径即可，新增图片只需在数组里加对应文件名：

// 按实际文件名调整数组项即可
const foodFileNames = ['pizza', 'burger', 'ramen', 'macaron', 'pie', 'salad']
// 路径根据你的部署根路径调整，如果是部署在域名根目录直接用`/${name}.png`即可
const foodShowcase = foodFileNames.map(name => `/${name}.png`)

Vite 项目专属自动导入方案 #

如果不想手动维护文件名列表，可以用Vite内置的import.meta.globAPI自动扫描目录文件：

// 扫描public目录下所有png图片，eager设为true表示直接同步导入
const imageModules = import.meta.glob('../../public/*.png', { eager: true })
const foodShowcase = Object.values(imageModules).map(module => module.default)

新增图片时只要放到对应目录，无需修改代码，数组会自动包含新增的图片资源。

Webpack 项目专属自动导入方案 #

Webpack环境可以用内置的require.context实现目录扫描：

// 参数说明：1. 目标目录相对路径 2. 是否遍历子目录 3. 匹配文件的正则
const imageContext = require.context('../../public', false, /\.png$/)
const foodShowcase = imageContext.keys().map(filePath => imageContext(filePath))

注意事项 #

• 所有方案最终输出的数组，和你之前逐个导入生成的foodShowcase使用方式完全一致，不需要修改渲染逻辑
• 注意文件名大小写和后缀名匹配，避免部署后出现404
• 如果需要过滤特定图片，可以在生成数组后加filter逻辑处理

内容的提问来源于stack exchange，提问作者Adityo Fauzaan