如何将本地图片导入initialState对象数组后遍历渲染展示？

解决方法 #

方法1：提前导入图片（适用于图片数量少、固定的场景）

1. 在你存放GlobalContext的文件顶部，导入对应本地图片，注意路径要和你的实际文件结构匹配：

// 示例：上下文文件存放在src/context/GlobalState.js，图片放在src/assets/purple-rain.jpg
import PurpleRainCover from '../assets/purple-rain.jpg';
// 其余专辑图片按同样规则导入即可

2. 把导入的变量直接赋值给album对象的cover字段：

const initialState = {
  albums: [
    {
      id: 1,
      cover: PurpleRainCover,
      name: 'Purple Rain',
      artist: 'Prince',
      year: '1984',
      genre: 'Pop',
    },
    // 其余专辑配置同理
  ]
};

3. 在列表渲染处，直接把cover字段赋值给img的src属性即可，注意React中要使用className替代原生的class属性声明样式：

<img src={album.cover} alt={`${album.name}专辑封面`}></img>

方法2：public文件夹托管（适用于图片数量多、后续可能动态新增的场景）

1. 把所有专辑封面图片移动到项目根目录的public文件夹下，比如新建public/album-covers目录统一存放所有封面图
2. initialState中直接填写图片的相对路径字符串即可：

const initialState = {
  albums: [
    {
      id: 1,
      cover: '/album-covers/purple-rain.jpg',
      name: 'Purple Rain',
      artist: 'Prince',
      year: '1984',
      genre: 'Pop',
    },
  ]
};

3. 渲染处的写法和方法1完全一致，直接用src={album.cover}即可。

常见问题排查 #

• 导入路径检查：import的相对路径是相对于当前编写导入语句的文件，不是相对于渲染图片的组件文件
• 文件名检查：确认图片文件名的大小写、后缀名和实际文件完全一致，Linux环境下大小写敏感，写错会导致加载失败
• 属性写法检查：jsx中不要用原生class属性写样式，要替换为React的className，否则样式不会生效

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