React本地图片画廊实现疑问：图片存放位置与数组配置

一、图片文件夹放public还是src？ #

• src目录：适合需要webpack处理的图片（如压缩、小图转base64），图片会被打包到构建产物中，路径由webpack自动管理。但图片数量较多时，手动逐个引入会比较繁琐。
• public目录：适合无需webpack处理的静态资源，构建时会原封不动复制到dist的public文件夹，直接通过/图片相对public的路径访问即可，无需使用require，批量处理更便捷。

二、两种目录下的实现方式 #

1. 图片放在src目录下 #

你的示例代码方向正确，注意路径匹配即可：

• 确保文件夹结构对应，比如图片在src/img/i1.jpg，组件中的路径要一致。
• 配置图片数组：

const images = [
  { id: 1, imageURL: require('./img/i1.jpg') },
  { id: 2, imageURL: require('./img/i2.jpg') }
];

• 渲染画廊：

function ImageGallery() {
  return (
    <div className="gallery">
      {images.map(img => (
        <img key={img.id} src={img.imageURL} alt={`Gallery image ${img.id}`} />
      ))}
    </div>
  );
}

如果图片数量多，可通过webpack的require.context批量导入：

// 批量导入src/img下的所有jpg图片
const importAll = (r) => r.keys().map(r);
const imagePaths = importAll(require.context('./img', false, /\.jpg$/));

// 转换为目标数组格式
const images = imagePaths.map((path, index) => ({
  id: index + 1,
  imageURL: path
}));

2. 图片放在public目录下 #

将图片文件夹放到public/img，更适合批量场景：

• 图片数组直接写路径字符串，无需require：

const images = [
  { id: 1, imageURL: '/img/i1.jpg' },
  { id: 2, imageURL: '/img/i2.jpg' }
];

• 渲染方式与src目录一致：

function ImageGallery() {
  return (
    <div className="gallery">
      {images.map(img => (
        <img key={img.id} src={img.imageURL} alt={`Gallery image ${img.id}`} />
      ))}
    </div>
  );
}

若图片命名有规律（如i1.jpg到i10.jpg），可循环生成数组：

const imageCount = 10;
const images = Array.from({ length: imageCount }, (_, i) => ({
  id: i + 1,
  imageURL: `/img/i${i + 1}.jpg`
}));

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