I need to display a simpile image inside of a svg-tag. The image is downloaded and accessable by a blob url like this "blob:http://localhost:4200/8e011a50-95a6-4063-baeb-e760b6fd98a2". The blob URL works on normal img without problems.
But in svg image tags it fails because of:
- SafeValue must use [property]=binding: blob:http://localhost:4200/4baf011f-a23d-45a7-9be2-3a6a9109ffda (see http://g.co/ng/security#xss)
The Template looks like this:
....
<svg ...>
<image [attr.xlink:href]="domSanitizer.bypassSecurityTrustUrl(blobstoreUrl)"></image>
...
</svg>
....
The component is constructing the blobstoreUrl itself:
@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"
}
}
In other posts i've found bypassSecurityTrustResourceUrl should fix it, but it doesn't.
I guess the problem is that [attr.xlink:href] is attribute binding but as the error tells us I have to use [property]=binding. But how to fix that?
