<img>:资源 URL 上下文中使用的不安全值 [英] &lt;img&gt;: Unsafe value used in a resource URL context

问题描述

自从升级到最新的 Angular 2 候选版本后，我的 img 标签:

Since upgrading to the latest Angular 2 release candidate, my img tags:

<img class='photo-img' [hidden]="!showPhoto1" src='{{theMediaItem.photoURL1}}'>

正在引发浏览器错误:

原始例外:错误:资源 URL 上下文中使用的值不安全

ORIGINAL EXCEPTION: Error: unsafe value used in a resource URL context

网址的值为:

http://veeu-images.s3.amazonaws.com/media/userphotos/116_1464645173408_cdv_photo_007.jpg

我已经尝试了另一个解决方案中提出的建议，该问题应该是重复的，但我遇到了同样的错误.

I have tried the suggestion made in the other solution that this question is supposed to be a duplicate of but I am getting the same error.

我已将以下代码添加到控制器中:

I have added the following code to the controller:

import {DomSanitizationService} from '@angular/platform-browser';

@Component({
  templateUrl: 'build/pages/veeu/veeu.html'
})
export class VeeUPage {
  static get parameters() {
    return [[NavController], [App], [MenuController], [DomSanitizationService]];
  }

  constructor(nav, app, menu, sanitizer) {

    this.app = app;
    this.nav = nav;
    this.menu = menu;
    this.sanitizer = sanitizer;

    this.theMediaItem.photoURL1 = this.sanitizer.bypassSecurityTrustUrl(this.mediaItems[1].url);
  }

我仍然收到相同的错误消息.

I am still getting the same error message.

我也将 html 更改为:

I have also changed the html to:

<img class='photo-img' [hidden]="!showPhoto1" [src]='theMediaItem.photoURL1'>

我仍然收到相同的错误消息

I still get the same error message

推荐答案

我使用的是 rc.4，此方法适用于 ES2015(ES6):

I'm using rc.4 and this method works for ES2015(ES6):

import {DomSanitizationService} from '@angular/platform-browser';

@Component({
  templateUrl: 'build/pages/veeu/veeu.html'
})
export class VeeUPage {
  static get parameters() {
    return [NavController, App, MenuController, DomSanitizationService];
  }

  constructor(nav, app, menu, sanitizer) {

    this.app = app;
    this.nav = nav;
    this.menu = menu;
    this.sanitizer = sanitizer;    
  }

  photoURL() {
    return this.sanitizer.bypassSecurityTrustUrl(this.mediaItems[1].url);
  }
}

在 HTML 中:

<iframe [src]='photoURL()' width="640" height="360" frameborder="0"
    webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>

使用函数将确保该值在您对其进行消毒后不会更改.另请注意，您使用的清理功能取决于上下文.

Using a function will ensure that the value doesn't change after you sanitize it. Also be aware that the sanitization function you use depends on the context.

对于图像，bypassSecurityTrustUrl 可以使用，但对于其他用途，您需要参考文档:

For images, bypassSecurityTrustUrl will work but for other uses you need to refer to the documentation:

https://angular.io/docs/ts/latest/api/platform-b​​rowser/index/DomSanitizer-class.html

这篇关于<img>:资源 URL 上下文中使用的不安全值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！