Angular2 and window.URL.createObjectURL

Question

I use window.URL.createObjectURL to create a blob: http link to preview the selected image in the img tag:

<img src=""{{itemPhoto}}"" />

itemPhoto is the field defined in the component and assigned when the image file is selected:

selectPhoto(photos: any[]) {
    if (photos[0]) {
      this.itemPhoto = window.URL.createObjectURL(photos[0]);
    }
  }

This works in angular2 RC1, but no longer works in version 2.0.0.

This is what the src attribute includes:

unsafe:blob:http://localhost:5555/xxxxx-xxxx-xxxx-xxxx-xxxxxxxxx

I tried the following after reading other posts:

this.itemPhoto = this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(photos[0]));

Then the src attribute includes the following:

unsafe:SafeValue must use [property]=binding: blob:http://localhost:5555/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxx (see http://g.co/ng/security#xss)

Any suggestions?

Many thanks

Update : OK, I really did not understand this error message inside src: "unsafe: SafeValue should use [property] = binding: ..."

Instead src={{itemPhoto}}, the following actions are performed:

<img [src]="itemPhoto" />

Still not sure why.

Answer 1

, . , property [] interpolation {{}} .

[src]="itemPhoto"