React中如何读取对象内存储的图片路径正确渲染显示图片

React 项目搭配 Vite、Create React App 等构建工具时，写在 JSON 里的纯字符串相对路径不会被构建工具自动识别处理：构建阶段既不会把对应图片资源打包到产物目录，也不会自动替换为部署后的有效访问路径，所以哪怕控制台能打印出路径字符串，浏览器实际发起请求时也找不到对应资源，导致图片加载失败。

选其中一种适配你的项目即可：

• 方案1：使用 public 目录存放静态资源（最简便）
  把存放头像的 images 整个文件夹移动到项目根目录的 public 文件夹下，同时把 data.json 里所有图片路径的开头 ./ 去掉，改成根路径格式：

  "image": {
    "png": "/images/avatars/image-amyrobson.png"
  }
  

  public 目录下的资源会被构建工具直接原样拷贝到产物根目录，通过以 / 开头的绝对路径就能直接访问，不需要额外做路径处理，原有组件代码不用改就能正常加载图片。

• 方案2：用 new URL 动态解析资源路径（无需挪动文件位置）
  如果你不想把图片放到 public 目录，保留图片在 src 下的原有位置，渲染图片时通过 new URL() 配合 import.meta.url 让构建工具识别资源引用，自动生成有效路径：

  // comment.tsx
  import React from 'react';
  import data from '../../data.json';
  
  const Comment = () => {
    const mapData = Object.values(data.comments).map((value) => (
      <div key={value.id}>
        <div>
          <img 
            // 注意拼接的相对路径是从当前comment.tsx文件出发，到data.json里写的路径的对应位置
            src={new URL(`../../${value.user.image.png}`, import.meta.url).href} 
            alt={value.user.username} 
          />
          {value.content}
        </div>
      </div>
    ));
  
    return <>{mapData}</>;
  };
  
  export default Comment;
  

• 方案3：数据源提前引入图片资源（适合图片量少的场景）
  把 data.json 改成 JS 格式的数据源文件，在文件顶部提前 import 所有图片资源，再赋值给对应字段，构建工具会在 import 阶段直接处理成有效访问路径：

  // data.js
  import amyrobsonPng from './images/avatars/image-amyrobson.png';
  import maxblagunPng from './images/avatars/image-maxblagun.png';
  // 其他头像资源依次引入
  
  export default {
    comments: [
      {
        id: 1,
        // 其他字段省略
        user: {
          image: {
            png: amyrobsonPng
          }
        }
      }
    ]
  }
  

  组件里引入这个js文件后，直接取 value.user.image.png 作为img的src即可正常加载，缺点是图片多的时候挨个写import比较繁琐。

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