Comment afficher l'image base64 dans AngularJS

Question

Besoin d'aide à nouveau;)

Je voudrais montrer une photo dans ma page angulaire. Ce sont mes étapes,

1. L'API REST obtient un document/enregistrement à partir de backend MongoDB. Les images base64 sont stockées comme ceci.

2. Les images/données sont chargées dans un tableau {{file_src [i]}} dans le code du composant, le HTML composant affichera l'image comme ci-dessous

situations:

1. Si j'ai utilisé "img srcs = {{file_src [i]}}", j'ai eu une opération non sécurisée. Mon serveur d'API REST a activé CORS. Comme l'image est en base64 et n'a pas d'URL, je ne sais pas si elle est liée à CORS.

2. I googled et trouvé la ng-src et directives données-ng-src. Les deux ne fonctionnent pas aussi. S'il vous plaît voir mon erreur de liaison ci-dessous.

Question: comment afficher l'image base64 dans ma page angulaire?

------ Code comme demandé par Vic --------

<section class="fhirForm"> 
     <fieldset> 
      <legend class="hd"> 
       <span class="text">Photo</span> 
      </legend> 
      <div class="bd" formArrayName="photos"> 
       <div *ngFor="let photo of patFormGroup.controls.photos.controls; let i=index" class="panel panel-default"> 
        <div class="panel-body" [formGroupName]="i"> 

         <label>Description</label> 
         <input type="text" class="form-control" formControlName="desc"> 

         <label>Photo</label> 
         <input type="file" size="30" multiple formControlName="photo" name="crud8" (change)="photoChange(input, i)" #input> 
         <!-- img src={{file_srcs[i]}} crossorigin="anonymous" alt="" /--> 
         <img data-ng-src={{file_srcs[i]}} alt="" /> 

         <span class="glyphicon glyphicon-remove pull-right" *ngIf="patFormGroup.controls.photos.controls.length > 1" (click)="removePhoto(i)"></span> 
        </div> 
       </div> 
      </div> 
     </fieldset> 

     <div class="margin-20"> 
      <a (click)="addPhoto()" style="cursor: default"> 
       <small>Add another photo +</small> 
      </a> 
     </div> 
    </section> 

---

initPhoto(desc?: String, photo?: string) { 
    //Add new entry on the 1 dimensional array. Allow 1 photo per section 
    this.file_srcs.push(photo); 
    console.log("Photo for file_srcs: [" + this.file_srcs[this.file_srcs.length - 1] + "]"); 

    return this.formBuilder.group({ 
     desc: [desc], 
     photo: [photo] 
    }); 
    } 

S'il vous plaît voir le console.log. Il a montré que this.file_srcs sont valides.

------------- message d'erreur dans Chrome -------

-------- ----- MISE À JOUR 1 -----------

Si j'ai commenté la ligne "input type = file ..." au-dessus de "img src" comme ci-dessous, je peux voir le photo. Quel est le problème avec ma contribution? Désolé, je ne me rappelle pas à quoi sert ce #input.

Par conséquent, mon problème ne peut pas être dans la photo, mais sur la ligne d'entrée;) Honte à moi !!!

   <label>Photo</label> 
       <!-- input type="file" size="30" formControlName="photo" name="crud8" (change)="photoChange(input, i)" #input --> 
       <img src={{file_srcs[i]}} crossorigin="anonymous" alt="" /> 

----------- --------- RESOLU

Merci beaucoup pour toute l'aide !!!

i. l'image base64 n'est pas la cause première;

ii. l'entrée de fichier "input type = file" a été initialisée en fournissant incorrectement l'image base64 comme valeur par défaut. Il a causé l'erreur - n'a pas réussi à définir la valeur de HtmlInputElement est correcte dans IE. Le message d'erreur "Opération non sécurisée" peut être trompeur dans Firefox. Par conséquent, la cause première n'est pas liée à l'image base64. Je voudrais supprimer ce fil une semaine plus tard.

initPhoto(desc?: String, photo?: string) { 

this.file_srcs.push(photo); 
console.log("Photo for file_srcs[" + (this.file_srcs.length - 1) + "]: [" + this.file_srcs[this.file_srcs.length - 1] + "]"); 

return this.formBuilder.group({ 
    desc: [desc], 
    photo: [""]  //This was photo: [photo]. After supplying the default value as "", it works well. 
}); 

Meilleures salutations,

Autorun

Answer 1

Fetch la teneur en base64 dans votre contrôleur comme ceci:

$http.get($scope.user.photo).then(function(response) { 
    $scope.user.data = response.data; 
}); 

afficher ensuite sur la vue

<img data-ng-src="data:image/png;base64,{{user.data}}"/> 

Answer 2

J'utilise base64 image beaucoup et n'ont pas vu cette erreur avant. Est-il causé par l'attribut crossorigin?

angular.module('test', []).controller('Test', Test); 
 

 
function Test($scope) { 
 
    $scope.base64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAOCAYAAADwikbvAAAA+0lEQVQ4T6WS3W3CMBSFz40QvDJCu0GYALJB2QBeUFzjCm9AJ0gLMQl9STegG5QNYARG6CsI+SKjpmppSY3w8/10fnwIVzy6lE2SollrbBcAPV8ET2fzOzAXDNYPUrx6wxOT9QjkwL4DnWMvODV5wUAP4EclxbiM+i88meUJMUYA3pSMu987qoRLqwDW+10j0rr/4QV/lrNwxwGClpSD9enPHJXTdD5i4vY+YK2F2BjzElrYdwDN05x/KpelMOGJGB0AIQGboYxvz23hR+apyVcO+jq2HCklll7wcT31rbMbgrBU93FUtcBfbSdZdlOztILlbpWq90jOqR8Au8VfIQFLZecAAAAASUVORK5CYII="; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
<div ng-app='test' ng-controller='Test'> 
 
    <img src={{base64}} /> 
 
</div>