React中遍历含图片URL数组时图片无法显示的问题求助

先梳理你代码里的问题，再逐个给出解决办法：

1. 修正无效的图片路径 #

你的OurTeamtext数组里，id为2、3的picture字段值是'sebastian'，这不是有效的图片路径，先改成对应图片的正确路径（比如'../images/Felix.png'）。

2. 适配React的本地图片引用规则 #

React项目中，本地图片的引用逻辑和普通HTML不同，需根据图片存放位置调整：

情况A：图片放在src目录下（比如src/images/） #

webpack会对src下的资源打包，直接写相对路径无法被正确解析，有两种解决方式：

方式1：提前导入图片资源

// 在组件文件顶部导入图片
import SebastianImg from '../images/Sebastian.png';
import FelixImg from '../images/Felix.png';

// 修改数组，直接传入导入的图片变量
export const OurTeamtext = [
    {
        id:1,
        name:'Sebastian',
        position:'Founder and CEO',
        picture: SebastianImg
    },
    {
        id:2,
        name:'Felix Merz',
        position:'Founder and CEO',
        picture: FelixImg
    },
    {
        id:3,
        name:'Felix Merz',
        position:'Founder and CEO',
        picture: FelixImg
    }
]

// 组件中直接使用
<img src={team.picture} alt={team.name} />

方式2：使用require动态引入

如果不想提前导入，可通过require动态加载，注意路径要相对于当前组件文件：

<img src={require(team.picture).default} alt={team.name} />

情况B：图片放在public目录下（比如public/images/） #

public是React的静态资源根目录，直接使用根路径开头的地址即可：

// 修改数组中的路径
export const OurTeamtext = [
    {
        id:1,
        name:'Sebastian',
        position:'Founder and CEO',
        picture:'/images/Sebastian.png'
    },
    // 其他项同理修改
]

// 组件中直接使用
<img src={team.picture} alt={team.name} />

3. 验证路径正确性 #

• 检查图片文件是否存在于你指定的路径中，文件名（包括大小写）要完全匹配
• 打开浏览器控制台的Network面板，查看图片请求的状态码：404表示路径错误，根据提示调整路径即可

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