Angular2 Base64 odkażania niebezpieczne wartość URL

Question

odpowiedź od mojego serwera wygląda jak następuje:

[{"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"}]}] 

Próbuję wyświetlić obraz base64 zwrócony w nim.

W moim komponentu:

ngOnInit() { 

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

a następnie w szablonie:

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

Gdzie safeHtml jest rura stworzyłem jak następujące:

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

To daje mi Required a safe URL, got a HTML błąd. Co tu jest nie tak? Jeśli usunę rurę z <img />, wówczas zostanie wyświetlony niebezpieczny adres URL.

Answer 1

Będziesz potrzebować

bypassSecurityTrustResourceUrl(html); 

zamiast

bypassSecurityTrustHtml(html);