React中如何通过Props传递的src路径显示图片？

你的问题出在打包工具（比如Webpack、Vite）不会处理字符串形式的相对路径，导致实际运行时图片路径无法正确指向打包后的资源。以下是几种可行的解决方法：

方法一：在data.js中用require导入图片 #

修改data.js的图片路径写法，让打包工具识别并处理资源：

const data = {
  lists: [
    {
      image: require("../assets/images/collection/23.png").default,
    },
    {
      image: require("../assets/images/collection/422.png").default,
    },
  ]
}

注意：如果是Vite环境，可能不需要.default，直接写require("../assets/images/collection/23.png")即可。

方法二：在组件渲染时动态解析路径 #

如果不想修改data.js，可以在渲染img标签时处理路径：

• Webpack环境：

<img src={require(`${props.item.image}`).default} alt={`${props.item.tokenId} image`} />

• Vite环境：

<img src={new URL(props.item.image, import.meta.url).href} alt={`${props.item.tokenId} image`} />

方法三：将图片移至public目录 #

把图片放到项目根目录的public文件夹下（比如public/assets/images/collection/23.png），然后修改data.js里的路径为绝对路径：

const data = {
  lists: [
    {
      image: "/assets/images/collection/23.png",
    },
    {
      image: "/assets/images/collection/422.png",
    },
  ]
}

这种方式下，打包工具会直接保留public目录下的资源结构，路径能正确指向图片。

内容的提问来源于stack exchange，提问作者Yellow rain coat