MERN栈项目中图片（如Logo）的正确存储位置及追踪问题咨询

前端静态资源（如Logo） #

方案1：放在public文件夹（推荐） #

Create React App（CRA）生成的前端项目里，public是专门存放无需webpack编译的静态资源的目录，直接放在这里的文件会被原样部署，不会被打包工具处理。比如把logo.png放在public/images/logo.png，代码里可直接用绝对路径引用：

<img src="/images/logo.png" alt="Logo" />

这个目录下的文件默认会被Git追踪（只要你没在.gitignore里手动排除它）。

方案2：放在src下的自定义文件夹（如src/images） #

如果要放在src目录里，必须确保图片在代码中被显式引用（import或require），否则webpack不会将其打包，Git也可能因未被引用而忽略（如果.gitignore规则包含未引用资源）。示例：

import logo from './images/logo.png';
<img src={logo} alt="Logo" />

若图片仍未被追踪，先检查.gitignore里有没有排除该文件夹，再确认代码中是否正确引用了它。

后端用户上传的动态图片 #

如果是用户上传的动态资源（如头像、上传文件），不能放在前端目录，要放在后端项目的独立静态文件夹，比如backend/public/uploads，然后用Express的express.static中间件托管该目录：

const express = require('express');
const app = express();
app.use('/uploads', express.static('backend/public/uploads'));

前端就能通过http://your-server-url/uploads/xxx.png访问这些图片。

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