将外部HTML加载到Angular 2组件时，相对引用会中断

Question

我有一台托管简单HTML的服务器，如下所示：

<a href="http://www.google.com" target="_blank">
   <img src="img/main.PNG"/>
</a>

IMG标记的src属性包含我想要显示的文件的相对位置。使用浏览器打开时，这非常有效。

问题在于，当我使用angular加载它时，Angular尝试在本地解析该相对位置，这显然不会起作用。 我按照SO中给出的提示进行了操作。例如this issue。

我现在拥有的：

HTML：

<div [innerHTML]="content"></div>

打字稿：

this.myService.subscribe(
  (html: any) => {
     this.content = html._body;
     this.loaded = true;
  },
  err => {
    this.error = true;
  });

如果我更改服务器上的HTML以返回图像的绝对URL，那么它可以工作：

 <img src="http://localhost:5500/img/main.PNG"/>

然而，在我的情况下，这不是一个可行的解决方案。

所以我的问题是： 有没有办法使用Angular 2从外部源加载HTML内容，而这种方式不会破坏所述HTML中的相对引用？

Answer 1

尝试将"img/main.PNG"更改为"./img/main.PNG"