[解決済み] <img>: Unsafe value used in a resource URL context

Question

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

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

are throwing a browser error:

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

The value of the url is:

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

EDIT:

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);
  }

まだ同じエラーメッセージが出ます。

EDIT2です。

htmlも変更しました。

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

まだ同じエラーメッセージが表示されます

どのように解決するのですか？

rc.4を使っていますが、この方法は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>

関数を使用することで、サニタイズ後に値が変更されないようにすることができます。また、使用するサニタイズ関数はコンテキストに依存することに注意してください。

画像の場合 bypassSecurityTrustUrl は動作しますが、他の用途ではドキュメントを参照する必要があります。 :

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