angular2和window.URL.createObjectURL

Question

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

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

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

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

这适用于angular2 RC1，但不再适用于2.0.0。

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

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

在阅读了一些其他帖子后，我尝试了以下方法：

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

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

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

有什么建议吗？

非常感谢

更新：好的，我没有真正理解src中的错误消息：“不安全：SafeValue必须使用[property]=绑定：…”

而不是 src={{项目照片}}，以下方法有效：

<img [src]="itemPhoto" />

但是仍然不知道为什么。

Answer 1

你可以试试错误想说什么。它说的是你必须使用属性[]绑定，而不是用属性插值{{}}。

[src]="itemPhoto"