无法将图像从快递服务器投放到Angle 2

Question

我有使用快递生成器配置的快递服务器。

我在快递中写着这行：

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

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

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

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

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

我尝试了所有技巧。我在做错什么吗？

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"。它将从提供角度应用程序的域中命中。因此，如果您正在开发应用程序，则通常会导致img src="http://localhost:4200/images/pic.png"。

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

Answer 2

我建议检查baseurl的角度设置，例如，如果您正在运行4+角度项目，则可以在index.html head标签内设置基本url

<base href="./">

然后，您不必为任何资源设置绝对路径。