javascript - 如何编辑和呈现存储为字符串的内部html？

我有一个来自字符串类型变量的html片段。
考虑一下，以下语句存储为字符串类型变量，

displayContent =
    `<div>
        <img alt="image1" src="image1.jpeg"/>
    </div>
    <div>
        <p>Some random text</p>
        <img alt="image2" src="image2.jpeg"/>
        <p>Some random text again</p>
        <img alt="image3" src="image3.jpeg"/>
        <p>Some random text</p>
    </div>`

现在，我必须在html页面中显示字符串变量displaycontent，其中displaycontent呈现为html文本。
我用过这个：<span [innerHTML]='displayContent'>
它把变量'displaycontent'的html代码漂亮地呈现在我的html主页中。
现在，某些来源的图片比我的页面大。我需要为每个<img />添加一个style元素，例如<img style="max-width: 100%" />
为了实现这一点，我们可以在javascript文件中使用replace()作为
displayContent = displayContent.replace(/<img/gi,'<img style="max-width: 100%" ')
所以，我们的新“显示内容”变成

`<div>
    <img style="max-width: 100%" alt="image1" src="image1.jpeg"/>
</div>
<div>
    <p>Some random text</p>
    <img style="max-width: 100%" alt="image2" src="image2.jpeg"/>
    <p>Some random text again</p>
    <img style="max-width: 100%" alt="image3" src="image3.jpeg"/>
    <p>Some random text</p>
</div>`

现在，当我使用
<span [innerHTML]='displayContent'>它不会以任何方式缩放我的图像。
图像仍然是原来的大小。
此外，浏览器的开发人员工具中的“图像样式”属性没有更新。Click here to see developer tools Styles

最佳答案

必须使用[innerHTML]将DomSanitizer绑定到safehtml。

import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  template: `
   <div [style.width.px]="300">
     <div [innerHtml]="safeHTML"></div>
   </div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  html = '<img src="https://via.placeholder.com/1000x1000" style="max-width: 100%" />';

  get safeHTML(): SafeHtml {
    return this.sanitizer.bypassSecurityTrustHtml(this.html);
  }

  constructor(private sanitizer: DomSanitizer) { }
}

Live demo