Angular 2+如何在角度构建后动态添加图像

Question

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

  

AppName / client / src / app / app.component.html＆lt; - 这里我要显示   图像; AppName / server / pulic / images＆lt; - 是地方   图像存储的位置

有没有人有任何想法？

Answer 1

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

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

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

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

通过这种方式，当您的网络服务器收到请求时，他会第一次看到它是否是您文件夹中包含的图像，否则它将为Angular提供服务。

注意

通过这种方式，如果您尝试访问不存在的图片，您会收到text/HTML结果，其中您的网页为内容，200为状态代码。

您可能需要检查文件的扩展名，如果是jpg，jpeg，png或gif您在文件夹中搜索，如果图片存在，将其作为回复发送，如果不存在，则发送404状态代码。

如果扩展名不是上述内容之一，那么无论如何都要提供webapp。

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