如何在React.js中引用React项目外部文件夹内的图片

方法1：给图片目录创建软链接到React public文件夹 #

React的public目录是静态资源根目录，打包时会完整保留其中内容。你可以给server/uploads/foods创建软链接到food/public下，让React能直接访问：

• Windows（需管理员权限）：

  mklink /D "你的项目根路径\food\public\food-imgs" "你的项目根路径\server\uploads\foods"
  

• macOS/Linux：

  ln -s /你的项目根路径/server/uploads/foods /你的项目根路径/food/public/food-imgs
  

之后在组件里用绝对路径引用：

<img src="/food-imgs/你的图片名.png" alt="食物图" />

方法2：配置webpack别名（需 eject 或用craco） #

React默认只会编译src目录内的资源，可通过webpack别名让它识别外部目录：

1. 已eject项目：
   打开food/config/webpack.config.js，在resolve.alias中添加：

   alias: {
     // 保留原有配置
     'food-imgs': path.resolve(__dirname, '../../server/uploads/foods')
   }
   

   组件内引用方式：

   import burgerImg from 'food-imgs/burger.png';
   <img src={burgerImg} alt="汉堡" />
   

2. 未eject项目（用craco）：
   • 安装依赖：npm install @craco/craco --save-dev
   • 在项目根目录创建craco.config.js：

     const path = require('path');
     module.exports = {
       webpack: {
         alias: {
           'food-imgs': path.resolve(__dirname, '../server/uploads/foods')
         }
       }
     };
     

   • 修改package.json的启动命令，替换react-scripts为craco：

     "scripts": {
       "start": "craco start",
       "build": "craco build",
       "test": "craco test"
     }
     

   之后就能用别名引用图片。

方法3：通过后端API提供图片访问 #

如果你的server是后端服务（比如Node.js/Express），可以写一个接口返回图片：

// server端示例代码
const express = require('express');
const path = require('path');
const app = express();

app.get('/api/food-imgs/:filename', (req, res) => {
  const imgPath = path.join(__dirname, 'uploads/foods', req.params.filename);
  res.sendFile(imgPath);
});

React组件内通过接口地址引用：

<img src={`/api/food-imgs/你的图片名.jpg`} alt="食物图" />

这种方式适合需要权限校验或动态加载图片的场景。

内容的提问来源于stack exchange，提问作者Md. Ismail