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

Question

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

我有这行快递：

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

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

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

该图像位于 express 生成器文件夹中的 public/images 中，并且不会在浏览器上呈现。

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

我尝试了那里的每一个技巧。难道我做错了什么？

标签： angularexpressserver

Answer 1

您需要提供 Angular 应用程序会命中的基本 URL，以便获取静态内容或命中 API。

因此，您可以在您的服务中执行以下操作并在您的组件的 .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"通常会产生结果。

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