ReactJs中使用JSON数据渲染项目关联图片失败如何解决

API 探路者

2026-9-25

问题根因

JSON中存储的id为字符串类型，你在代码顶部import导入的p1~p6是独立的资源变量，二者没有绑定关系。直接将字符串"p1"传入img标签的src属性时，浏览器会将其识别为相对路径发起资源请求，自然无法加载到正确的图片。

解决方法

完全不需要放弃JSON实现需求，只需要新增一层图片映射关系即可，修改后的代码如下：

import Pdata from "../../api/projects.json";
import p1 from "../../img/Project/PoleAnglais.png";
import p2 from "../../img/Project/I-Art.png";
import p3 from "../../img/Project/Hestia.png";
import p4 from "../../img/Project/EvlV1.png";
import p5 from "../../img/Project/Kelly.png";
import p6 from "../../img/Project/EthLnyV2.png";
import { Component } from "react";

// 新增图片映射对象，key和JSON中的id一一对应
const imgMap = {
  p1: p1,
  p2: p2,
  p3: p3,
  p4: p4,
  p5: p5,
  p6: p6
}

class Plist extends Component {
  render() {
    return (
      <div
        className="project-list"
        data-aos="fade-right"
        data-aos-duration="1200"
      >
        {Pdata.map((projectDetail, index) => {
          return (
            <div className="project-block" key={index}>
              <h2 className="project-title">{projectDetail.title}</h2>
              <p className="date">{projectDetail.date}</p>
              <p className="project-desc">{projectDetail.desc}</p>
              {/* 从映射对象中取对应图片资源，alt补充项目名优化无障碍体验 */}
              <img src={imgMap[projectDetail.id]} alt={projectDetail.title} />
              <p className="madewith">made with {projectDetail.tags}</p>
            </div>
          );
        })}
      </div>
    );
  }
}
export default Plist;