Pytanie Angular2 Base64 dezynfekcji niebezpiecznej wartości adresu URL


Odpowiedź z mojego serwera wygląda następująco:

[{"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ć zwracany obraz base64.

W moim komponencie:

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 potokiem, który stworzyłem jak następuje:

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 /> następnie mówi niebezpieczny adres URL.


21
2018-03-31 13:08


pochodzenie




Odpowiedzi:


Potrzebujesz

bypassSecurityTrustResourceUrl(html);

zamiast

bypassSecurityTrustHtml(html);

27
2018-03-31 13:10



Dzięki! To był mój błąd. - Nitish


Miałem ten sam problem. Nasza aplikacja "X" służy do przechowywania obrazów przesłanych lokalnie, konwertując je na base64 przed zapisaniem ich w bazie danych (użyliśmy do wypełnienia danych wejściowych, tj. dane: image / jpg; base64). Podczas odzyskiwania go do wyświetlenia, miałem ten sam problem. Zużyłem zebrane dane do odzyskanego łańcucha base64. Używał tego do zrzucenia powyższego błędu. Postanowiliśmy więc zapisać cały skonwertowany ciąg znaków, nie popychając go, a teraz działa dobrze. Zobacz, jeśli to pomaga!


0
2018-05-17 12:42