如何将blob-urls用作SVG图像标签的xlink：href属性

Question

我需要在svg标签内显示一个简单的图像。可以通过Blob网址下载图像并访问该图像，例如“ blob：http：// localhost：4200 / 8e011a50-95a6-4063-baeb-e760b6fd98a2”。 Blob URL可在普通img上正常使用。

但是在svg image标签中，它失败的原因是：

• SafeValue必须使用[property] = binding：blob：http：// localhost：4200 / 4baf011f-a23d-45a7-9be2-3a6a9109ffda（请参见some other logic）

模板如下：

....
<svg ...>
   <image [attr.xlink:href]="domSanitizer.bypassSecurityTrustUrl(blobstoreUrl)"></image>
   ...
</svg>
....

该组件正在构造blobstoreUrl本身：

@Component({...})
export class MyComponent {

   blobstoreUrl: string

   constructor(public domSanitizer: DomSanitizer) { }

   ngOnInit() {
     // do some calculation
     this.blobstoreUrl = "blob:http://localhost:4200/8e011a50-95a6-4063-baeb-e760b6fd98a2"
   }
}

在其他帖子中，我发现bypassSecurityTrustResourceUrl应该可以解决此问题，但不能解决。

http://g.co/ng/security#xss

我想问题是[attr.xlink:href]是属性绑定，但是由于错误告诉我们我必须使用[property]=binding。但是如何解决呢？