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。

你有什么想法吗？

- BadHabits

---

@AakashThakur localhost:4200 是您可以用来进行开发的 Angular 4 应用程序访问地址（如果未通过--port参数指定其他端口）。 - BadHabits

你能展示一下你的服务调用吗？ - Aakash Thakur

@MarkusKollers 我不想保存任何东西。我使用http.get从服务器获取练习，并包含短描述，该描述以HTML格式呈现。但是，此HTML描述中的图像src是相对路径-指向也存储在服务器上的图像。然而，我想为其设置不同的基础。 - BadHabits

你的图片在本地主机的8080端口上吗？ - Markus Kollers

你不能修改你的后端返回绝对路径吗？ - Markus Kollers

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>

应该使用“instead”代替。

环境常量看起来像这样：

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

- BadHabits