Angular2 Base64 nettoyant la valeur de l'URL non sûre

Question

La réponse de mon serveur ressemble à ceci:

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

J'essaie d'afficher l'image base64 qui y est retournée.

Dans ma composante:

 ngOnInit() {

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

puis dans le modèle:

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

Où safeHtml est un Pipe que j'ai créé comme suit:

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

Cela me donne Required a safe URL, got a HTML erreur. Qu'est-ce qui ne va pas ici? Si je supprime le tuyau de <img /> il indique une URL non sécurisée.

Answer 1

Vous auriez besoin

 bypassSecurityTrustResourceUrl(html);
 

au lieu de

 bypassSecurityTrustHtml(html);
 

Answer 2

J'ai eu le même problème. Notre application «X» permet de stocker des images téléchargées localement en les convertissant en base64 avant de les enregistrer dans la base de données (nous avons utilisé pour faire apparaître les données initiales, c'est-à-dire les données: image / jpg; base64 ). En le récupérant pour l'afficher, j'ai eu le même problème. J'avais l'habitude de concaténer les données sautées à la chaîne base64 récupérée. Il lançait l'erreur ci-dessus. Nous avons donc décidé de stocker l'intégralité de la chaîne convertie sans l'écraser et maintenant son bon fonctionnement. Voyez, si ça aide!