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

Posted 2023-05-07

【中文标题】Angular 4：在innerHTML中设置img src base href

【英文标题】：Angular 4: Setting img src base href inside of innerHTML

【发布时间】：2017-10-29 21:35:24

【问题描述】：

在我的 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。

知道怎么做吗？

【问题讨论】：

Angular is trying to get them from standard localhost:4200 你能详细说明这一点吗？还有什么错误？

您是否已将文件配置为 angular-cli.json 中的资产？如果没有，您的文件将不会被复制到 dist 文件夹并且将无法用于网络服务器

@AakashThakur localhost:4200 是您可以访问 Angular 4 应用程序进行开发的地方（如果 --port 未另行指定）。

您能出示您的服务电话吗？

@MarkusKollers 我不想保存任何东西。我使用 http.get 从服务器获取锻炼，其中包含 HTML 格式的 shortDescription。但是此 HTML 描述中的图像 src 是相对路径 - 指向也存储在服务器上的图像。但是，我想为它设置不同的基础。

【参考方案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'
;