angular2 和 window.URL.createObjectURL答案

【问题标题】：angular2 and window.URL.createObjectURLangular2 和 window.URL.createObjectURL
【发布时间】：2016-09-27 21:14:45
【问题描述】：

我使用 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 中的错误消息： "unsafe:SafeValue 必须使用 [property]=binding:..."

代替src={{itemPhoto}}，以下工作：

<img [src]="itemPhoto" />

仍然不知道为什么。

【问题讨论】：

我没有时间仔细研究您的问题，但前几天我遇到了类似的问题 - 我使用 blob:http 链接显示了一个 pdf，看看我是如何在这里设法做到了，它可能会对你有所帮助：stackoverflow.com/questions/37046133/…
试试[src]="itemPhoto"提示的错误是什么
嗨 Stefan 我刚刚发现了问题所在。我真的不明白 src 中的错误消息：“unsafe:SafeValue must use [property]=binding:...” 而不是 src={{itemPhoto}}，以下工作：仍然不知道为什么。
感谢@PankajParkar，这正是我刚刚尝试过的，并且有效。谢谢！
@StefanSvrkota sanitizer 只是说我要从另一个域获取图像，因为你必须绕过安全性。

【解决方案1】：

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

[src]="itemPhoto"

【讨论】：