如何在AngularJS中显示base64图像

Question

需要再次帮助;）

我想在我的Angular页面中显示一张照片。这些是我的步骤，

1. REST API从后端MongoDB获取文档/记录。 base64图像以这种方式存储。

这些图像/数据被加载到在分量代码的阵列{{file_src [I]}}，则该组件HTML将显示图像如下面

情况：

1. 如果我使用“img srcs = {{file_src [i]}}”，我的操作就不安全。我的REST API服务器启用了CORS。由于该图像是base64数据，并且没有任何URL，因此我不知道它与CORS有关。

我一派周围，发现NG-src和数据-NG-SRC指令。他们两人都不工作。请参阅下面的我的绑定错误。

问：如何显示在我的角度页中的Base64形象？

------守则维克--------

<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] 
    }); 
    } 

请参阅的console.log要求。它表明this.file_srcs是有效的。

-------------在Chrome错误消息-------

-------- ----- UPDATE 1 -----------

如果我在下面的“img src”上面注释了“input type = file ...”行，我可以看到照片。我的输入有什么问题？对不起，我不记得#input是什么。

因此，我的问题可能不在照片中，但在输入行上;）对我感到羞耻！

   <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="" /> 

--------- -----------决议：

非常感谢所有帮助！

i。 base64映像不是根本原因;

ii。文件输入“输入类型=文件”是通过将base64图像作为默认值提供不正确来初始化的。它造成了错误 - 无法在IE中设置HtmlInputElement的值是正确的。错误消息“不安全操作”在Firefox中可能会产生误导。

因此，根本原因与base64图像无关。我想在一周后删除此主题。

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. 
}); 

最好的问候，

自动运行

Answer 1

取在控制器中的Base64内容是这样的：

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

然后显示它在视图

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

Answer 2

我用base64图像很多并没有看到过这个错误。是否由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>