React开发中传递props后图片src属性无法正常生效的问题

问题原因 #

你在JS里直接写的相对路径字符串不会被打包工具（Webpack/Vite等）识别为资源引入，运行时路径会基于当前页面URL解析，而非你编写代码的JS文件所在路径，因此无法匹配到正确的图片资源。

解决方案 #

方案1：提前导入图片资源（推荐）

打包工具会自动处理导入的图片资源，生成正确的打包后路径，同时支持图片压缩、哈希重命名等优化，适合静态图片场景。
修改LandingPage代码如下：

import React from 'react'
import { ImageBlock } from '../components/ImageBlock'
// 提前导入所有图片
import imgTransform from "../assets/images/mobile/image-transform.jpg"
import imgStandOut from "../assets/images/mobile/image-stand-out.jpg"
import imgGraphic from "../assets/images/mobile/image-graphic-design.jpg"
import imgPhoto from "../assets/images/mobile/image-photography.jpg"

const LandingPage = () => {
    const imageBlocks = [
        {
            src: imgTransform,
            alt: "transform"
        },
        {
            src: imgStandOut,
            alt: "stand out"
        },
        {
            src: imgGraphic,
            alt: "graphic design"
        },
        {
            src: imgPhoto,
            alt: "photography"
        }
    ]

    return (
        <div className="l-home-wrapper">
            <ImageBlock image={imageBlocks[0]}/>
        </div>
    )
}

export default LandingPage

ImageBlock组件无需修改即可正常使用。

方案2：使用public文件夹静态资源

如果需要动态拼接图片路径，可以把整个assets文件夹移动到项目根目录的public文件夹下，直接使用基于public目录的绝对路径：

const imageBlocks = [
    {
        src: "/assets/images/mobile/image-transform.jpg",
        alt: "transform"
    },
    // 其余图片按同样格式修改路径即可
]

排查技巧 #

打开浏览器开发者工具的「网络」面板，筛选img请求，查看图片实际请求的完整路径，和本地图片的真实路径比对，可快速定位路径解析偏差问题。

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