Angular上传图片需ng build才显示，更换存储路径后仍无法访问

Alright，咱们先拆解下你遇到的两个核心问题的根源：

• 你把图片存在server/images但浏览器访问不了，是因为当前Express只把dist/my-app设为静态资源目录，这个目录外的文件自然没法通过HTTP请求被访问到。
• 而src/assets里的图片必须执行ng build才能显示，是因为Angular构建时会把assets目录的内容打包到dist文件夹里，动态上传的图片不会自动加入打包流程，所以必须重新构建才能被识别。

第一步：让Express能访问自定义图片目录 #

你需要在Express的静态资源配置里，额外添加一条指向server/images的路由映射，这样浏览器就能通过指定的URL前缀访问到这些图片了。

修改你的Express代码：

const path = require('path');
const express = require('express');
const app = express();

// 保留原有的Angular dist目录静态配置
app.use(express.static(path.join(__dirname, 'dist/my-app')));

// 添加新的静态目录映射，'/images'是浏览器访问时的URL前缀，可自定义
app.use('/images', express.static(path.join(__dirname, 'server/images')));

// 其他路由/服务配置...
app.listen(3000, () => {
  console.log('Server running on port 3000');
});

现在，你上传的server/images/image.jpg就可以通过http://localhost:3000/images/image.jpg直接在浏览器访问了。

第二步：让上传的图片无需ng build即可显示 #

既然动态上传的图片不能依赖Angular的打包流程，那前端就不要再用assets/xxx这种Angular项目内的相对路径来引用图片了，直接用上面配置的URL前缀来拼接图片地址。

举个Angular组件里的示例：

// 假设从后端拿到上传后的图片文件名，比如'image.jpg'
uploadedImageUrl = '/images/image.jpg'; // 直接用Express配置的路由前缀

然后在组件模板里引用：

<img [src]="uploadedImageUrl" alt="Uploaded Image">

这样一来，你上传图片到server/images后，刷新浏览器就能直接看到图片，完全不需要再执行ng build了。

额外小提醒 #

• 确保server/images目录存在，如果不存在，可以在上传逻辑里用fs.mkdirSync(path, { recursive: true })自动创建多级目录。
• 如果前端和后端跑在不同端口，记得在Express里配置CORS中间件，避免跨域访问问题。

内容的提问来源于stack exchange，提问作者Mr.Ali