React表格中加载本地媒体目录图片失败问题排查

问题场景 #

我正在React项目中实现从本地存储加载图片并在表格中显示的功能：图片存储在/src/media目录，组件脚本位于/src/components，当前使用mock_data.json模拟数据库数据。

模拟数据（mock_data.json） #

[{"id":1,"Image":"img1.jpg","Cr":"1/2","Name":"Goblin","Source":"Monster Manual","Type":"Humanoid","Size":"Medium","Alignment":"N","Tag":"tag","Info":"Info"},{"id":2,"Image":"img2.jpg","Cr":"1/4","Name":"Spider","Source":"Monster Manual","Type":"Monster","Size":"Medium","Alignment":"N","Tag":"tag","Info":"Info"}]

组件代码（Monsters.jsx） #

import "./Monsters.css";
import data from "./mock_data.json";
import { useState } from "react";

export default function Monsters() {

const [monsters, setMonsters] = useState(data);
return (
         
    <div className="app-container">
        <h1>Monsters</h1>
        <table>
            <thead>
                <tr>
                    <th> </th>
                    <th>Cr</th>
                    <th>Name</th>
                    <th>Source</th>
                    <th>Type</th>
                    <th>Size</th>
                    <th>Alignment</th>
                    <th>Tag</th>
                    <th>Info</th>
                </tr>
            </thead>
            <tbody>
                {monsters.map((monster) => (
                    <tr>
                       <td><img src={`../media/${monster.Image}`} alt={monster.Name} width="25" /></td>
                        <td>{monster.Cr}</td>
                        <td>{monster.Name}</td>
                        <td>{monster.Source}</td>
                        <td>{monster.Type}</td>
                        <td>{monster.Size}</td>
                        <td>{monster.Alignment}</td>
                        <td>{monster.Tag}</td>
                        <td>{monster.Info}</td>
                    </tr>
                ))}
                
            </tbody>
        </table>
    </div>
    
)
};

问题现象 #

检查网页元素可见图片路径正确（如<img src="../media/img2.jpg" alt="Spider" width="25">），但图片无法显示，仅能看到alt文本。

原因及解决方案 #

核心原因 #

React项目依赖打包工具（如Create React App）处理资源时，src目录下的文件会被编译打包，最终输出到build目录的特定位置。直接使用../media/xxx.jpg这种相对路径，浏览器会从组件的最终部署路径去寻找图片，而非从src/media读取，导致路径实际无效。

解决方案 #

有两种可靠的处理方式：

方式一：通过import/require引入图片

利用打包工具的资源解析能力，动态引入图片：

<td>
  <img 
    src={require(`../media/${monster.Image}`).default} 
    alt={monster.Name} 
    width="25" 
  />
</td>

如果图片数量较少，也可以提前统一导入并建立映射表：

// 组件顶部导入图片
import img1 from "../media/img1.jpg";
import img2 from "../media/img2.jpg";

// 创建图片映射
const imageMap = {
  "img1.jpg": img1,
  "img2.jpg": img2
};

// 循环中使用映射表
<td>
  <img 
    src={imageMap[monster.Image]} 
    alt={monster.Name} 
    width="25" 
  />
</td>

方式二：将图片移至public目录

1. 在项目根目录的public文件夹下创建media子目录，把所有图片移入public/media；
2. 修改图片路径为网站根目录绝对路径：

<td>
  <img 
    src={`/media/${monster.Image}`} 
    alt={monster.Name} 
    width="25" 
  />
</td>

public目录下的资源不会被打包工具修改，浏览器会直接从网站根目录加载这些文件。

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