Angular2 Base64では、危険なURL値を消毒

Question

私のサーバーから

応答は以下のようになります。

[{"coreGoalId":1,"title":"Core goal 1","infrastructure":"Sample Infrastructure","audience":"People","subGoals":null,"benefits":[{"benefitId":1,"what":"string","coreGoalId":1}],"effects":null,"steps":null,"images":[{"imagelId":1,"base64":"/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcU\nFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgo\nKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wgARCAIWAe4DASIA\nAhEBAxEB/8QAHAABAAIDAQEB"}]}] 

私はそれで返さbase64で画像を表示しようとしています。テンプレートで

ngOnInit() { 

    this.homeService.getGoals() 
    .subscribe(
     goals => this.coreGoals = goals, 
     error => this.errorMessage = <any>error); 
} 

、その後：

私のコンポーネントで

import { Pipe } from '@angular/core'; 
import { DomSanitizer } from '@angular/platform-browser'; 

@Pipe({name: 'safeHtml'}) 
export class SafeHtml { 
    constructor(private sanitizer:DomSanitizer){} 

    transform(html) { 
    return this.sanitizer.bypassSecurityTrustHtml(html); 
    } 
} 

これは私にRequired a safe URL, got a HTMLエラーを与える：safeHtmlは、私は次のように作成されたパイプをある

<ul> 
    <li *ngFor="let goal of coreGoals"> 
     {{goal.title}} 
     <img [src]="'data:image/jpg;base64,'+goal.images[0].base64 | safeHtml" /> 
    </li> 
</ul> 

。ここで何がうまくいかないのですか？もし私が<img />からパイプを取り除くと、安全ではないと言います。

Answer 1

代わり

bypassSecurityTrustHtml(html);