无法将快速服务器中的图像提供给 Angular 2答案

【问题标题】：Cannot serve images from express server to angular 2无法将快速服务器中的图像提供给 Angular 2
【发布时间】：2019-02-01 02:43:00
【问题描述】：

我使用 express 生成器配置了 express 服务器。

我在快递中有这行：

app.use(express.static(path.join(__dirname, 'public')));

同样在角码中，我有这个：

img src="/images/pic.png".

图像在 express generator 文件夹中的 public/images 中，它不会在浏览器上呈现。

如果我用img src="http://localhost:8080/images/pic..." 替换代码，它将呈现。

我尝试了所有的技巧。我做错了吗？

【问题讨论】：

【解决方案1】：

您需要提供 Angular 应用将要访问的基本 URL，以便获取静态内容或访问 API。

因此，您可以在您的 service 中执行以下操作，并在您的 组件的 .ts 文件中提供，或者如果您希望也可以声明 environment.ts 文件中的 baseUrl：-

const baseUrl = http://localhost:8080;

然后在您的 组件的 HTML 中：-

<img src="{{baseUrl}}/images/pic.png">

您面临的问题是由于img src="/images/pic.png"。它将到达提供 Angular 应用程序的域。因此，如果您正在开发应用程序，那么它通常会导致img src="http://localhost:4200/images/pic.png"。

但是，如果您从托管图像的同一域中提供应用程序，即如果您可能使用了反向代理，则可以按照您尝试的方式获取它。但这需要您配置额外的服务器。

【讨论】：

您的回答很有帮助，我使用基本 url localhost.. 创建了一个 ts 文件并导入到 app.module 中。这适用于当我想插入单个图像时，我可以使用 {{baseUrl}}，但是当我想构建一个轮播所以我想指出图像的来源时我该怎么办？轮播图片位于 /public/images/carousel
@gxg baseUrl 仅指域。您可以在源标签中添加它。所以，它变成了 {{baseUrl}}/public/images/carousel。如果我无法理解您的意思，请告诉我。
我只是通过分配给轮播 src {{baseUrl}/images/carousel/img1 等中的每个图像而成功。我如何在 .ts 文件中创建一个名为 images 的变量，以便我可以迭代.html。示例：“让 img for images”这样我可以更轻松地构建轮播？
@gxg - 关于数组，您可以通过将baseUrl 与/images/carousel/img 附加然后可能附加index+1 来创建一个数组（仅当图像遵循命名约定，例如@ 987654328@、img2、img3 等）在您的*ngFor 中。

【解决方案2】：

我建议检查 baseurl 的 angular 设置，例如，如果您正在运行 angular 4+ 项目，您可以在 index.html 头标签中设置 base url

<base href="./">

那么您不必设置任何资源的绝对路径。

【讨论】：