我需要在svg
标签内显示一个简单的图像。可以通过Blob网址下载图像并访问该图像,例如“ blob:http:// localhost:4200 / 8e011a50-95a6-4063-baeb-e760b6fd98a2”。 Blob URL可在普通img
上正常使用。
但是在svg image
标签中,它失败的原因是:
模板如下:
....
<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
。但是如何解决呢?