在Create React App项目中能否单行批量导入图片为数组？

你的这种单行导入多张图片再存入数组的写法，在Create React App（CRA）项目里完全有效。

CRA默认的webpack配置会自动处理这类静态资源导入：当你用import导入图片文件时，webpack会把这些图片打包到构建产物目录中，同时返回处理后的资源URL。把这些URL存入数组后，你可以直接在组件里使用这个数组渲染图片，比如：

hatsArr.forEach(hatSrc => (
  <img key={hatSrc} src={hatSrc} alt="Hat" />
))

不过如果你的帽子图片数量较多，手动逐个写import会有点繁琐，这里给你推荐一个更高效的批量导入方式——用require.context自动导入目录下的所有目标图片：

// 批量导入hats目录下所有.png格式的图片
const hatsContext = require.context('../../assets/img/accesories/hats', false, /\.png$/);
// 将所有图片的URL映射为数组
const hatsArr = hatsContext.keys().map(hatsContext);

这个方法的好处是，后续新增帽子图片时，你完全不用修改导入代码，webpack会自动把新图片加入数组里，非常省心。

如果还是偏好手动导入的方式，也建议把导入语句分成多行，可读性会更好，比如：

import Hat1 from '../../assets/img/accesories/hats/hat1.png';
import Hat2 from '../../assets/img/accesories/hats/hat2.png';
import Hat3 from '../../assets/img/accesories/hats/hat3.png';
import Hat4 from '../../assets/img/accesories/hats/hat4.png';
import Hat5 from '../../assets/img/accesories/hats/hat5.png';
import Hat6 from '../../assets/img/accesories/hats/hat6.png';

const hatsArr = [Hat1, Hat2, Hat3, Hat4, Hat5, Hat6];

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