React+Node.js全栈应用中图片资源的存放位置咨询

得先区分静态图片和动态图片两种场景来判断：

1. 静态图片（项目自带的固定资源） #

如果是项目开发时就确定的静态资源（比如logo、默认图标、页面装饰图），放在客户端src目录下不是绝对错误，但更推荐放在React项目的public文件夹：

• 放在src里的图片需要通过import导入后使用（比如import img from './data/xxx.png'），会被webpack打包处理，适合需要按需加载或者和组件绑定的资源；
• 放在public里的图片可以直接通过根路径访问（比如/data/xxx.png），无需导入，打包时会原封不动复制到构建产物的根目录，适合全局通用的静态资源。

2. 动态图片（用户上传、动态生成的内容） #

这种情况绝对不能放在客户端src目录，必须放在Node.js服务端或者第三方云存储服务：

• 客户端的代码最终会被打包成静态文件部署，无法接收和存储用户上传的内容（浏览器没有文件写入权限，且静态部署环境通常不支持文件系统操作）；
• 服务端可以处理文件上传请求，将图片存储在服务端的指定目录（比如uploads文件夹），或者上传到云存储，然后通过接口返回图片的访问地址给客户端。

总结：静态图片可根据使用习惯选src或public，动态图片必须放在服务端或云存储。

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