在 MEAN Stack 中获取前端的图像

在我们之前的章节中，我们使用了文件 URL，并且我们还成功提取了 imagePath。现在，我们希望显示 imagePath 所指示的图像。因此，在本节中，我们将学习如何在前端获取图像。我们将使用以下步骤在前端显示图像

1) 我们将回到我们的 post-list.component.html 文件。在这里，我们只输出标题，然后在帖子的展开框中，只输出内容。现在，我们也希望拥有我们的图像，我们可以按照我们想要的方式设置样式。我们将在标题和内容之间添加一个 div，并在其中设置一个类名，这取决于您。在这个 div 中，我们有我们的图像。我们将再次将我们的 alt 标签绑定到 post.title，并将 src 绑定到 post.imagePath，如下所示

如果我们保存它并返回到我们的 Angular，我们将得到一个错误，并且我们在任何地方都看不到图像。

这不起作用，因为我们请求了无效的图像路径。我们没有为我们的旧帖子获取任何图像路径。我们将转到 Network 选项卡并检查我们获取帖子的请求。在那里，在响应的预览中，我们有我们的帖子数组，并且确实在数据库中缺少图像路径。

图像路径未保存，因为自我们添加该功能以来，我们尚未创建帖子。因此，我们将删除所有帖子，添加一个新帖子，并检查图像。

2) 错误仍然存在，因为我们未能获取该图像。原因是我们在后端没有授予对该图像文件夹的访问权限。默认情况下，我们所有文件都无法访问。我们控制我们的路由来告诉可以访问什么。我们不会在任何地方提供对图像文件夹的访问权限。为此，我们将转到我们的 app.js 文件并在其中添加一些内容。

我们希望使该图像文件夹静态可访问，这意味着任何以该文件夹为目标的请求都应该被转发或应该被允许继续。在我们的 bodyparser 中间件之后，我们调用另一个中间件。此中间件将按以下方式编码

此中间件内置于 express 中。此中间件将应用于其中包含 /images 的任何请求。如果是这种情况，我们要添加的中间件是 express 附带的，即静态中间件。因此，我们使用了 express .static()。

app.use("/images", express.static()) 意味着任何以 /images 为目标的请求都将被允许继续并从那里获取其文件。但是，app.use("/images", express.static()) 将无法工作，因为 /images 实际上是错误的。它隐藏在后端文件夹下。因此，为了映射它，我们导入了一个随 NodeJS 附带的 path 包，并使用 path.join() 方法构造了到我们支持的图像文件夹的路径。

现在，我们将保存所有文件并返回到我们的 Angular 并查看图像。

3) 一切看起来都很好，我们可以看到图像。现在，我们将通过转到我们的前端代码来修复样式。我们将按照以下方式编写 post-image 类的 CSS 代码

现在，我们返回到我们的 Angular 应用程序以查看更改。

现在，我们从后端加载了我们的图像，由我们的应用程序上传。在下一节中，我们将学习如何更新这些帖子。

下载完整项目 ( image upload.zip)