MERN栈中如何通过MongoDB存储的路径在React中显示图片？

问题原因 #

require()的参数必须是静态字符串，webpack在打包阶段会静态分析所有require的路径并提前打包对应的资源。如果传入动态变量（比如shop.image），webpack无法预知要加载哪些文件，导致图片加载失败。

可行解决方案 #

方案1：将上传图片放到React的public目录（推荐） #

React的public目录下的资源不需要经过webpack编译，可以直接通过URL访问：

1. 调整Multer的存储路径，指向React项目的public/uploads文件夹（没有则新建）。
2. 保存到MongoDB的路径改为相对public的路径，比如/uploads/xxx.jpg。
3. React组件里直接使用路径字符串：

shops.map((shop, key) => (
    <div className="shop" key={key}>
        <img src={shop.image} alt="店铺图片" />
        <div className="shop-content">
            <h1>{shop.name}</h1>
            <p>{shop.street}</p>
            <p>ID: {shop._id}</p>
            <button onClick={() => { changeEdit(shop) }}>Edit</button>
            <button>Delete</button>
        </div>
    </div>
))

方案2：用webpack上下文模块加载src目录下的图片 #

如果图片必须放在src相关目录下，可以通过webpack的require.context提前声明要加载的目录范围：

1. 在组件顶部定义上下文：

// 根据实际目录层级调整路径，最后一个正则用于匹配图片后缀
const shopImages = require.context('../../../uploads/', false, /\.(png|jpe?g|webp|svg)$/);

2. 渲染图片时使用上下文加载：

<img src={shopImages(shop.image)} alt="店铺图片" />

注意：这里shop.image需要是相对于上下文目录的路径（比如abc.jpg，而非完整的../../../uploads/abc.jpg），需要对应调整MongoDB中存储的路径格式。

方案3：后端提供图片访问接口 #

如果图片存储在服务器端（而非React项目目录），可以让后端编写接口（比如GET /api/images/:filename），接口内部读取图片文件并返回给前端，前端直接用接口URL作为图片src：

<img src={`/api/images/${shop.image}`} alt="店铺图片" />

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