web-dev-qa-db-fra.com

Ionic 3- display image base64 image, assainissant la valeur de l'URL non sécurisée

Je souhaite afficher une image base64 pour une image de profil . L'image est stockée dans la base de données sous forme de données binaires et j'ai converti ces données binaires en base64 à l'aide de btoa (). maintenant, je veux lier cette image base64 à img src J'ai essayé de nombreuses façons, mais cela ne fonctionne pas, aidez-moi s'il vous plaît voici mon code

code profile.ts:

profilePicture(binImage)
{
    if(binImage != null)
    {
        var imageData = btoa(binImage);
        //console.log("Base64 Image: ",imageData);
        this.displayImage = imageData;
    }
}

profil.html code:

<div class="profile-picture big-profile-picture" *ngIf="displayImage">
    <img src="data:Image/*;base64,{{displayImage}}">
</div>

 Check this image, it't not displaying the picture

Il affiche une erreur "suppression de la valeur de l'URL non sécurisée que safevalue doit utiliser [propriété] = liaison"

angularimageionic-frameworkbase64ionic3
5
Shreyas Pednekar

Ajouter un désinfectant et désinfecter l'URL avant de l'utiliser dans le modèle

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

...
constructor( private sanitizer: DomSanitizer, .... ) {}
...

profilePicture(binImage)
{
    if(binImage != null)
    {
        var imageData = btoa(binImage);
        //console.log("Base64 Image: ",imageData);
        this.displayImage = this.sanitizer.bypassSecurityTrustUrl("data:Image/*;base64,"+imageData);
    }
}

dans votre modèle juste:

<div class="profile-picture big-profile-picture" *ngIf="displayImage">
    <img src="{{displayImage}}">
</div>
3
mike_t

Si vous ne souhaitez pas stocker les données deux fois, vous pouvez placer la chaîne de métadonnées dans le code HTML. Cela a fonctionné mieux pour mon scénario

<div class="profile-picture big-profile-picture">
    <img src="{{'data:image/png;base64,' + imageData}}">
</div>
1
Lucas Crandle

Essayez de mettre une adresse publique pour l'URL. Si vous avez un serveur sur lequel ils sont enregistrés, vous devez indiquer l'adresse publique de votre serveur et le mot de passe sur lequel l'image est enregistrée.

0
Antonio Posada Magdaleno

Dans votre fichier TypeScript, dans CameraOptions, vous pouvez remplacer FILE_URI par DATA_URL comme ceci destinationType: this.camera.DestinationType.DATA_URL

0
SANA Abdoul Aziz