Angular构建后动态上传图片无法显示求助（Angular5+Node.js）

嘿，我之前也踩过Angular静态资源加载的坑，结合你的项目结构，给你几个针对性的解决方向：

1. 配置Node.js后端的静态文件服务 #

动态上传的图片存在server/public/images，首先得让Node.js把这个目录暴露成可访问的静态资源。如果你用Express框架的话，在后端入口文件里加这段代码：

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

// 把public/images目录映射到/images路由
app.use('/images', express.static(path.join(__dirname, 'public/images')));

这样前端就能通过/images/[图片文件名]的路径访问到上传的图片了。

2. 前端使用正确的图片访问路径 #

在app.component.html里显示图片时，不要用相对路径（比如../server/public/images/xxx.jpg），而是用后端提供的静态资源路由。举个例子：

<!-- 开发环境（假设后端运行在localhost:3000） -->
<img src="http://localhost:3000/images/my-uploaded-image.jpg" alt="上传的图片">

<!-- 生产环境（前后端同域名部署） -->
<img src="/images/my-uploaded-image.jpg" alt="上传的图片">

如果前后端分离部署，记得把域名换成实际的后端服务器地址。

3. 检查Angular构建的baseHref配置 #

Angular构建时如果baseHref设置不正确，会导致所有资源路径出错。你可以在构建命令里指定正确的base路径：

# 部署在根目录用/，子目录则换成对应路径
ng build --base-href /

或者在Angular 5的配置文件.angular-cli.json里，修改defaults > build > baseHref的值，确保和实际部署路径匹配。

4. 验证图片上传的完整性 #

最后别忘了排查上传环节的问题：

• 确认图片确实被成功保存到了server/public/images目录下
• 检查后端返回给前端的图片文件名是否正确，有没有拼写错误
• 查看浏览器控制台的网络请求，看看图片请求是404还是其他错误，根据提示进一步排查

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