La respuesta de mi servidor se parece a lo siguiente:
[{"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"}]}]Estoy tratando de mostrar la imagen base64 devuelta en él.
En mi componente:
ngOnInit() { this.homeService.getGoals() .subscribe( goals => this.coreGoals = goals, error => this.errorMessage = <any>error); }y luego en la plantilla:
<ul> <li *ngFor="let goal of coreGoals"> {{goal.title}} <img [src]="'data:image/jpg;base64,'+goal.images[0].base64 | safeHtml" /> </li> </ul>Donde safeHtml es una tubería que creé de la siguiente manera:
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); } } Esto me da Required a safe URL, got a HTML . ¿Qué está fallando aquí? Si elimino la tubería de <img /> , dice URL insegura.
necesitarías
bypassSecurityTrustResourceUrl(html);en vez de
bypassSecurityTrustHtml(html);Tuve el mismo problema. Nuestra aplicación 'X' solía almacenar imágenes cargadas localmente convirtiéndolas a base64 antes de guardarlas en la base de datos (solíamos mostrar los datos iniciales, es decir , datos: imagen/jpg; base64 ). Mientras lo recuperaba para mostrarlo, tuve el mismo problema. Solía concatenar los datos emergentes con la cadena base64 recuperada. Solía arrojar el error anterior. Entonces, decidimos almacenar toda la cadena convertida sin abrirla y ahora funciona bien. ¡A ver si te sirve!