React如何将对象数组内img的src通过props传递给子组件并正常展示

1. 首要错误：props属性名不匹配 #

你在父组件Galleries中给子组件Gallery传递图片路径的属性名是galery，但子组件内部读取的是props.src，二者名称不一致，导致图片路径读取为undefined，自然无法加载图片。

修复方式二选一： #

• 父组件修改传参属性名：把<Gallery name={gallery.name} galery={gallery.src} />改成<Gallery name={gallery.name} src={gallery.src} />
• 或者子组件修改取值逻辑：把<img src={props.src} ... />改成<img src={props.galery} ... />

2. 本地图片路径引用错误 #

就算属性名修正后，你直接写的字符串形式相对路径../../Images/xxx.jpg也无法正常加载：React 打包编译时会处理静态资源的路径，直接写字符串相对路径不会被webpack识别处理，打包后实际路径和开发时的路径不匹配，会出现404错误。

两种修复方案： #

方案1：提前导入本地图片

在Galleries组件顶部导入需要的图片，把导入结果作为src的值：

import React from 'react';
import Gallery from '../Gallery/Gallery';
// 导入图片
import img1 from '../../Images/photographer-gfc1c015b1_1920.jpg'

const Galleries = (props) => {
  const galleries = [
    {
      name: 'natur',
      src: img1,
    },
    {
      name: 'moutain',
      src: img1,
    },
  ];
  return (
    <div>
      <h1>I have {galleries.length} Images</h1>
      {galleries.map((gallery, index) => (
        // 遍历列表加唯一key属性，避免控制台警告
        <Gallery key={index} name={gallery.name} src={gallery.src} />
      ))}
    </div>
  );
};

export default Galleries;

子组件保持原有逻辑即可：

import React from 'react';

const Gallery = (props) => {
  return (
    <div>
      <h1>{props.name}</h1>
      <img src={props.src} alt="" style={{ height: '200px', width: '300px' }} />
    </div>
  );
};

export default Gallery;

方案2：把图片放到public目录下

将Images文件夹移动到项目根目录的public文件夹中，直接用绝对路径引用即可：

const galleries = [
  {
    name: 'natur',
    src: '/Images/photographer-gfc1c015b1_1920.jpg',
  },
  {
    name: 'moutain',
    src: '/Images/photographer-gfc1c015b1_1920.jpg',
  },
];

这种方式不需要导入图片，webpack打包时会直接把public下的资源原样复制到打包产物根目录，路径可以直接匹配。

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