如何在包含HTML的变量中绑定blob属性？

Question

假设我有一个包含HTML字符串的变量：

let html = '<img src="https://example.com/image.png">';

如何设置绑定到src属性的属性？

我已尝试html.replace('src', '[src]');，但我认为它仅仅被视为文字，因为当我将图像检索为blob并使用DomSanitizer.bypassSecurityTrustUrl时，它会给我：

<img [src]="SafeValue must use [property]=binding: blob:file:///[GUID]">

因此，当我在模板上输出HTML时，它无法正常工作。

Answer 1

由于包含img的HTML来自变量而不是模板，因此您无法对img src使用属性绑定。而是使用字符串替换来设置img src中的blob url，然后使用DomSanitizer.bypassSecurityTrustHtml将html变量的安全性转换为组件中名为let＆＃39; s say sanitizedHTMLvariable的属性。然后，您可以使用

将此属性绑定到组件模板

<div [innerHTML]="sanitizedHTMLvariable"></div>

因此，在这种情况下，不需要绕过Blob URL的安全性，而是绕过变量中的完整HTML内容（假设您信任HTML内容）。