ReactJS前端开发模拟后端数据的方案及资源路径读取问题咨询

我之前在React项目里也碰到过一模一样的困扰！用JSON存模拟数据时，直接写媒体文件的相对路径根本读不出来，后来试了几个实用的办法，分享给你：

方案1：在组件中导入媒体文件后传入JSON（推荐） #

React的模块系统要求显式导入静态资源，你可以先把图片、视频文件导入到组件里，再把导入后的资源对象赋值给JSON数据：

// 先导入本地媒体文件
import productImg from './assets/images/product.jpg';
import demoVid from './assets/videos/demo.mp4';

// 模拟后端数据
const mockData = [
  {
    id: 1,
    title: "示例商品",
    image: productImg, // 使用导入后的资源引用
    video: demoVid
  }
];

// 组件中使用数据
function MediaCard() {
  return mockData.map(item => (
    <div key={item.id}>
      <img src={item.image} alt={item.title} />
      <video src={item.video} controls />
    </div>
  ));
}

这个方法完全契合React的资源处理逻辑，打包工具（Webpack/Vite）会自动处理这些资源，不会出现路径找不到的问题。

方案2：将媒体文件放在public目录，使用绝对路径 #

如果你的媒体文件放在项目根目录的public文件夹下，可以直接在JSON里写基于public根目录的绝对路径：

比如文件路径是public/assets/images/product.jpg，JSON数据可以这么写：

[
  {
    "id": 1,
    "title": "示例商品",
    "image": "/assets/images/product.jpg",
    "video": "/assets/videos/demo.mp4"
  }
]

然后在组件中直接使用这个路径：

import mockData from './mock/data.json';

function MediaCard() {
  return mockData.map(item => (
    <div key={item.id}>
      <img src={item.image} alt={item.title} />
      <video src={item.video} controls />
    </div>
  ));
}

注意：public目录下的资源不会被打包工具处理，会原封不动复制到输出目录，所以路径要确保准确。

方案3：用工具函数动态解析路径 #

如果已经有大量JSON数据不想修改结构，可以写个工具函数把JSON里的相对路径转换成可访问的URL：

import mockData from './mock/data.json';

// 解析媒体路径的工具函数
const getMediaUrl = (relativePath) => {
  return new URL(relativePath, import.meta.url).href;
};

function MediaCard() {
  return mockData.map(item => (
    <div key={item.id}>
      <img src={getMediaUrl(item.image)} alt={item.title} />
      <video src={getMediaUrl(item.video)} controls />
    </div>
  ));
}

这个方法适合不想改动现有JSON的场景，import.meta.url会获取当前模块的URL，拼接相对路径后就能得到正确的资源地址。

为什么直接写路径不行？ #

React项目（尤其是Create React App或Vite搭建的）依赖打包工具处理静态资源，只有显式导入或者放在public目录的资源才会被正确识别。直接在JSON里写相对路径的话，打包工具不会解析这个路径，浏览器自然找不到对应的文件。

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