基于随机整数实现图片源动态选择的可扩展方案咨询

方案一：使用数组存储图片（基础优化） #

直接将所有导入的图片存入数组，通过随机索引获取图片，彻底抛弃冗余的switch-case：

import greeting from "../images/memoji/image1.png";
import coding from "../images/memoji/image2.png";
import lightbulb from "../images/memoji/image3.png";

// 所有图片统一存入数组，新增图片只需在此添加元素
const imageList = [greeting, coding, lightbulb];

// 生成0到数组长度-1之间的随机索引
const randomIdx = Math.floor(Math.random() * imageList.length);
const randomImage = imageList[randomIdx];

<img src={randomImage} />

优势：

• 扩展性极强：新增图片时只需在imageList数组中添加对应的导入项，无需修改其他逻辑
• 代码大幅简化：不需要自定义的getRandomIntInclusive函数，直接利用数组长度生成随机索引
• 逻辑清晰：一眼就能看出是从图片列表中随机选取

方案二：批量导入图片（适合大量图片场景） #

如果你的图片数量较多，不想手动逐个导入，可以借助构建工具的批量导入能力：

Webpack 环境 #

// 批量加载指定目录下的所有PNG图片
const imageContext = require.context('../images/memoji', false, /\.png$/);
// 将导入的模块转换为图片URL数组
const imageList = imageContext.keys().map(key => imageContext(key));

const randomIdx = Math.floor(Math.random() * imageList.length);
const randomImage = imageList[randomIdx];

<img src={randomImage} />

Vite 环境 #

// 批量导入指定目录下的PNG图片（eager: true 表示同步导入）
const imageModules = import.meta.glob('../images/memoji/*.png', { eager: true });
// 提取图片URL到数组
const imageList = Object.values(imageModules).map(module => module.default);

const randomIdx = Math.floor(Math.random() * imageList.length);
const randomImage = imageList[randomIdx];

<img src={randomImage} />

优势：

• 零手动导入：新增图片只需放到目标目录，无需修改代码
• 完全自动化：构建工具自动识别并导入符合规则的图片，适合图片数量多的场景

内容的提问来源于stack exchange，提问作者Braxton Goss