React项目如何从数据文件加载本地图片并传入JSX组件正常渲染

根因说明 #

你遇到的.src报错问题核心差异是资源类型不同：你提到的serviceIcon1属于svg组件/结构化图标对象，本身包含.src属性，而png/jpg等普通图片导入后返回的是纯字符串路径，没有.src属性，强行调用就会触发报错。

针对不同存放位置的解决方法 #

1. 图片存放在public目录 #

public目录下的资源会直接映射到项目运行的根路径，不需要导入，直接写绝对路径即可：

// 数据文件代码，无需导入图片
export default {
  schoolData: [
    {
      id: 1,
      Register: serviceIcon1,
      title: "Price",
      body: "The highly the not having with lively Our up with.",
      Link:"www.google.com",
      // 直接写public下的相对根路径
      Logo:"/exchanges/testimage.png" 
    }
  ]
}

注意：路径必须以/开头，不要加./、../等相对路径前缀，避免路由跳转时路径解析错误。

2. 图片存放在src/assets目录 #

先在数据文件中用相对路径导入图片，导入后的结果直接作为Logo字段的值即可：

// 数据文件代码，路径替换为你项目中assets到数据文件的相对路径
import testimage from "../assets/exchanges/testimage.png";

export default {
  schoolData: [
    {
      id: 1,
      Register: serviceIcon1,
      title: "Price",
      body: "The highly the not having with lively Our up with.",
      Link:"www.google.com",
      Logo: testimage
    }
  ]
}

两种方案的JSX代码都不需要修改，保持src={schoolData.Logo}即可正常渲染。

排查验证方法 #

如果修改后还是无法显示，可以先在JSX文件中直接导入目标图片打印验证：

import testimage from "你的图片路径";
console.log(testimage); // 正常会打印出可访问的资源路径字符串

如果打印结果是undefined，说明导入路径填写错误，调整相对路径即可。

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