angular2和window.URL.createObjectURL

Bin*_*iao 5 unsafe blob angular

我使用window.URL.createObjectURL来创建一个blob:http链接,用于预览img标签中的所选图像:

<img src=""{{itemPhoto}}"" />
Run Code Online (Sandbox Code Playgroud)

itemPhoto是在组件中定义的字段,在选择图像文件时分配:

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

这适用于angular2 RC1但不再适用于2.0.0.

以下是进入src属性的内容:

unsafe:blob:http://localhost:5555/xxxxx-xxxx-xxxx-xxxx-xxxxxxxxx
Run Code Online (Sandbox Code Playgroud)

在阅读其他一些帖子后我尝试了以下内容:

this.itemPhoto = this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(photos[0]));
Run Code Online (Sandbox Code Playgroud)

然后以下内容进入src属性:

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

有什么建议?

非常感谢

更新:好的,我真的不明白src里面的错误信息:"unsafe:SafeValue必须使用[property] = binding:..."

而不是src={{itemPhoto}},以下工作:

<img [src]="itemPhoto" />
Run Code Online (Sandbox Code Playgroud)

仍然不确定为什么.

Pan*_*kar 5

您可以尝试尝试说出错误.它说的是你必须使用property[]绑定而不是interpolation{{}}和属性.

[src]="itemPhoto"
Run Code Online (Sandbox Code Playgroud)