Ionic 2 + Angular 2: le immagini precedute da "non sicuro", pertanto non vengono visualizzate anche se vanno bene

Question

Per alcune ragioni, alcune delle mie immagini vengono anteposte con 'unsafe:', che impedisce loro di essere renderizzate.

Q) Perché sta succedendo questo e come posso risolverlo? È angolare 2 essere dispari con whitelist o Ionic 2?

ad es.

<p><img src="unsafe:data:image/jpeg;base64,/9..... 
<p><img src="data:image/jpeg;base64,/9..... 

Non c'è niente di sbagliato con l'immagine (vedi qui), vedi plunkr here

La seconda immagine è resa dal ionico 2, il primo che ho rimosso manualmente il prefisso per mostrare va bene.

Answer 1

Per chiunque vivendo questo problema, ho 'risolto' esso utilizzando il seguente:

Classe:

import {DomSanitizationService} from '@angular/platform-browser'; 

constructor(private _DomSanitizationService: DomSanitizationService) {} 

Template:

<img [src]="_DomSanitizationService.bypassSecurityTrustUrl(imgSrcProperty)"/> 

Dove imgSrcProperty è l'immagine offensiva base64 codificata.

Continuo a pensare che sia un bug!

Answer 2

Vorrei aggiungere una risposta aggiuntiva, quindi alcuni di voi non dovranno eseguire il debugging per anni.

Abbiamo anche riscontrato questo problema insieme a Ionic + Angular su iOS (WKWebView) e scoperto che gli URL di dati Base64 sono anche considerati "non sicuri" una volta che la stringa Base64 contiene interruzioni di riga. In stile MS Windows CRLF o LF.

Abbiamo proceduto a rimuovere quei caratteri offensivi dalle stringhe base64 (un'interfaccia esterna era "carina" loro), che alla fine ha risolto il problema per noi.

Prima di applicare il bypass indicato da @Dave, vorrei controllare la stringa.