Angular 2+如何在角度构建后获取动态添加的图像答案

【问题标题】：Angular 2+ How to get dynamically added images after angular buildAngular 2+如何在角度构建后获取动态添加的图像
【发布时间】：2018-05-05 06:41:10
【问题描述】：

嗨，我正在开发一个应用程序，它使用 Angular 5 作为前端，Node.js 作为后端，将图像上传到服务器。问题是，在我将图像上传到服务器后，我无法以角度显示它。我的文件夹结构是这样的：

AppName/client/src/app/app.component.html

有人有什么想法吗？

【问题讨论】：

【解决方案1】：

您必须配置服务器才能在需要时提供正确的图像。问题不在于 Angular。

如果您使用 express，您可以在为 webapp 提供服务之前添加以下规则：

app.use(express.static('server/public/images'));

用你的相对路径修复上面的代码。

这样，当你的 web 服务器收到请求时，他会首先查看它是否是你文件夹中包含的图像，否则它将服务于 Angular。

这样，如果您尝试访问不存在的图像，您将收到text/HTML 结果，其中您的网页作为内容，200 作为状态码。

您可能需要检查文件的扩展名，如果它是jpg、jpeg、png 或gif，则在文件夹中搜索，如果图像存在，则将其作为响应发送，如果不存在'不存在你发送404状态码。

如果扩展程序不是上述之一，那么无论如何您都可以提供 web 应用程序。

app.use(express.static('server/public/images'));
app.get(/\.(jpg|jpeg|png|gif)$/, function(req, res) {
  res.status(404).send('Not found');
});

【讨论】：

你是对的克里斯蒂安，但知道当我直接访问 url 时，我看到了 json 数据。我如何保护该路线以供客户查看，同时使其可用于 Angular，以便他可以请求获取图像数据。
你不能！不存在一种安全的方法来区分来自 Angular 的请求和来自用户的请求。您可以将密钥绑定到每个 Angular 请求，但用户可以发现该密钥并使用它来构建自己的请求。实现数据保护的唯一方法是提供登录系统并检查用户是否登录以访问数据。