Angular 角度：如何在innerHTML中加载安全图像

在

innerHtml

元素中加载安全图像（可通过授权头访问的图像）的最佳方法是什么

我知道，可以使用以下管道加载安全图像：

<img [src]="'http://secured/image/url' | authImage | async"/>
# or
<img src="{{ 'http://secured/image/url' | authImage | async}}"/>

#或

导出类AuthImagePipe实现PipeTransform{
构造函数（专用http:HttpClient）{
}
异步转换（src:string）：承诺{
const headers=新的HttpHeaders（{'Authorization'：'Bearer token`}）；
试一试{
const imageBlob=wait this.http.get（src，{headers，responseType:'blob'}）.toPromise（）；
const reader=new FileReader（）；
返回新承诺（（解决、拒绝）=>{
reader.onloadend=（）=>解析（reader.result为字符串）；
reader.readAsDataURL（imageBlob）；
});
}抓住{
返回'fallback.png'；
}
}
}

---

但是，我不知道如何将此逻辑应用于innerHtml内容中的所有图像。请注意，innerHtml的内容是动态的，可能会根据用户的输入而更改。

我将创建一个

指令

，用于清理指定元素的内容。如果我理解正确，您的意思是更改图像URL&向其附加

|authImage | async

，然后绕过angular的安全控制来解析这些更改。正确的？如果是的话。。。1.我想知道是否有更好的方法来做到这一点，因为在这种情况下（因为用户将提供innerHtml的内容），它可能会带来安全风险（用户可能会添加额外的脚本，最终在这种情况下被选中）。如何将此管道应用于innerHtml中的所有图像？regex？嗯，不，我不是那个意思。Dom Sanitizer允许您将任何需要的内容呈现到元素中（例如，divs），并且它是安全的。为了只写短语，而不是在每个元素上写一首诗，需要这个指令。现在我理解了Jacopo。谢谢我创建了该指令&它适用于innerHtml内容。我使用了

选择器：'img'，

作为选择器来应用于任何图像标记&然后我检查src以查看该src url是否需要标题&它正在工作！只剩下一个问题：这种方法对innerHtml很好，但对我使用的wyswyg编辑器不起作用。我的意思是，似乎该指令不会在wyswyg编辑器中拾取img标记。是因为wsywyg编辑器动态创建标记，还是因为它是angular中使用的第三方库？老实说，我以前从未听说过这个库，所以现在我不知道为什么它不为您工作。如果lib可以自由使用的话，我将对此进行研究。