Angular 8：如何无需重建项目即可显示新上传及Node.js添加的图片

嘿，我之前在Angular 8里碰到过一模一样的问题！核心原因其实很好理解：Angular在构建（包括启动开发服务器时）会把项目根目录src/assets里的文件复制到输出目录（比如dist文件夹），应用运行时实际读取的是输出目录里的文件，而不是你直接修改的src/assets。所以直接往src/assets里加文件，不管是手动传还是Node.js后端传，运行中的应用都“看不到”这些新文件，除非重新构建同步过去。

下面分开发环境和生产环境给你具体的解决方案：

开发环境解决方案 #

让开发服务器实时同步assets目录的变化 #

默认情况下Angular的开发服务器可能不会实时监测src/assets里的新增文件，你可以修改angular.json配置，让它自动监听目录变化并同步到临时输出目录：
找到projects -> [你的项目名称] -> architect -> build -> options -> assets，把assets配置调整成这样：

"assets": [
  "src/favicon.ico",
  {
    "glob": "**/*",
    "input": "src/assets/",
    "output": "/assets/",
    "watch": true
  }
]

配置好后重启开发服务器，之后你往src/assets里新增的图片，服务器会自动同步到临时输出目录，不用重建就能直接访问。

直接上传到开发服务器的输出目录（临时方案） #

如果你是用Node.js后端上传图片，开发阶段可以直接把文件传到dist/[你的项目名]/assets目录（而不是src/assets），这样开发服务器会直接读取到这个文件，不用等待同步。不过要注意，这个目录是构建生成的，执行ng build时会被清空，所以只适合开发阶段临时用。

生产环境解决方案 #

生产环境下，dist是打包好的静态文件目录，直接往项目根目录的src/assets里加文件完全没用——用户访问的是dist里的内容。这时候最稳妥的办法是把动态上传的图片和Angular的静态构建文件分开存储：

搭建独立的静态文件服务 #

在你的Node.js后端项目里新建一个专门的上传目录，比如public/uploads，然后配置静态文件服务让这个目录可以通过URL直接访问。以Express为例：

const express = require('express');
const app = express();
// 配置后，uploads目录下的文件可以通过http://你的域名/uploads/xxx.jpg访问
app.use('/uploads', express.static('public/uploads'));

之后在Angular应用里，直接用这个后端URL来访问图片，比如<img src="http://你的域名/uploads/新上传的图片.jpg">，不管什么时候上传的图片，都能直接访问，完全不用依赖Angular的构建流程。

不推荐：强行往dist/assets里加文件 #

如果你坚持要把文件放到dist/assets，那每次上传后需要手动把文件复制到这个目录，但这样不仅麻烦，而且后续重新构建项目时dist会被清空，之前上传的文件都会丢失，所以非常不推荐这种做法。

额外提醒 #

• 修改angular.json后一定要重启开发服务器，配置才会生效。
• 生产环境下，动态上传的资源和Angular静态构建文件分开存储是最佳实践，既避免构建时丢失文件，也方便后续的资源管理和扩容。
• 访问图片时，生产环境尽量用绝对路径或者后端提供的静态文件URL，不要用相对路径指向assets，避免路径错误。

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