node.js - Angular 2+ 如何在 Angular 构建后动态添加图像

Question

我正在开发一个应用程序，使用 Angular 5 作为前端，使用 Node.js 作为后端，将图像上传到服务器。 问题是，将图像上传到服务器后，我无法以 Angular 显示它。

我的文件夹结构是这样的:

AppName/client/src/app/app.component.html <- Here I want to display the images; AppName/server/public/images <- Is the place where the images are stored

有人有什么想法吗？

Answer 1

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

如果您使用express，您可以在提供网络应用程序之前添加以下规则:

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

使用您的相对路径修复上述代码。

这样，当你的网络服务器收到请求时，他会首先查看它是否是你文件夹中包含的图像，否则它将为 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');
});