angular2和window.URL.createObjectURL [英] angular2 and window.URL.createObjectURL

问题描述

我使用window.URL.createObjectURL创建blob:http链接，以预览img标签中的选定图像:

I use window.URL.createObjectURL to create a blob:http link for previewing selected image in an img tag:

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

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

itemPhoto is a field defined in a component and gets assigned when an image file is selected:

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

这在angular2 RC1中有效，但在2.0.0中不再有效.

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

以下是src属性的内容:

Here is what gets into the src attribute:

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

在阅读其他文章后，我尝试了以下操作:

I tried the following after reading some other posts:

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

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

Then the following gets into the src attribute:

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

有什么建议吗?

非常感谢

更新:好的，我不太了解src中的错误消息: "unsafe:SafeValue必须使用[property] = binding:..."

Update: OK, I didn't really understand that error message inside src: "unsafe:SafeValue must use [property]=binding:..."

代替src={{itemPhoto}}，可以进行以下工作:

Instead of src={{itemPhoto}}, the following works:

<img [src]="itemPhoto" />

仍然不确定为什么.

推荐答案

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

You could just try what error is trying to say. what it said is you have to use property [] binding instead of interpolation {{}} with attribute.

[src]="itemPhoto"

这篇关于angular2和window.URL.createObjectURL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！