如何在AngularJS中顯示base64圖像

Question

再次需要幫助;）

我想在“ Angular”頁面中顯示照片。 這些是我的步驟

1. REST API從后端MongoDB獲取文檔/記錄。 base64圖像將以此存儲。

2. 將圖像/數據加載到組件代碼中的數組{{file_src [i]}}}中，然后組件HTML將如下所示顯示圖像

情況：

1. 如果使用“ img srcs = {{file_src [i]}}”，則操作不安全。 我的REST API服務器已啟用CORS。 由於該圖像是base64數據，並且沒有任何URL，因此我不知道它與CORS有關。

2. 我四處搜尋，發現了ng-src和data-ng-src指令。 他們兩個都不工作。 請在下面查看我的綁定錯誤。

問題：如何在我的Angular頁面中顯示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中的錯誤消息-------

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

- - - - - 解決 - - - - - -

非常感謝所有幫助！！！

一世。 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>