angular - 如何使用 blob-urls 作为 SVG 图像标签的 xlink:href 属性

Question

我需要在 -tag 内显示一个简单的图像svg。图像通过类似“blob:http://localhost:4200/8e011a50-95a6-4063-baeb-e760b6fd98a2”的 blob url 下载和访问。blob URL 正常工作，img没有问题。

但是在 svgimage标签中它失败了，因为：

• SafeValue 必须使用 [property]=binding: blob:http://localhost:4200/4baf011f-a23d-45a7-9be2-3a6a9109ffda （参见http://g.co/ng/security#xss）

模板如下所示：

....
<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应该修复它，但它没有。

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

标签： angulartypescriptsvg