Angular 4：在innerHTML中设置img src base href

Question

在我的Angular 4应用程序中，我使用innerHTML来显示HTML格式的练习说明。

<li *ngFor="let exercise of exercises">
  <div [innerHTML]="exercise.longDescription"></div>
</li>

这些描述也可以包含图像

<img src="/file/na\6ad7k4ynon6yh2qcibcdqxwcey.jpg">

这就是我在努力的地方，因为我需要将这些图像的基本href设置为localhost：8080，我的后端是。 Angular正试图从标准localhost：4200（ng serve）获取它们，所以我得到了errors。

知道怎么做吗？

Answer 1

找到一个解决方案，不确定它是否是最干净的解决方案，但它完成了工作。

我在我的练习模型中创建了一个函数，它将environment.URL添加到src（localhost：8080用于开发，服务器用于生产API）。

public getHTML () {
    return this.longDescription.replace(/<img src="([^"]+)">/, '<img src="'+environment.URL+'$1">');
  }

我可以像这样访问它

<div [innerHTML]="exercise.getHTML()"></div>

代替。

环境const看起来像这样：

export const environment = {
  production: false,
  URL: 'http://localhost:8080'
};