html - Angular 4 : Setting img src base href inside of innerHTML

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>

相反。

环境常量看起来像这样:

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