Question

再次需要帮助;）

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

REST API从后端MongoDB获取文档/记录。 base64图像存储为此。

图像/数据被加载到组件代码中的数组{{file_src [i]}}中，然后组件HTML将显示如下图像

情况：

如果我使用＆＃34; img srcs = {{file_src [i]}}＆＃34;，我会得到不安全的操作。我的REST API服务器已启用CORS。由于图片是base64数据，并且没有任何网址，我不知道它与CORS有关。

我用Google搜索并找到了ng-src和data-ng-src指令。他们俩都不会工作。请参阅下面的绑定错误。

问题：如何在我的Angular页面中显示base64图像？

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

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

------------- Chrome中的错误消息-------

-------------更新1 -----------

如果我注释掉＆＃34;输入类型=文件......＆＃34;排在＆＃34; img src＆＃34;如下，我可以看到照片。我的输入有什么问题？对不起，我不记得#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。文件输入＆＃34;输入类型=文件＆＃34;由于错误地提供base64图像作为默认值而初始化。它导致错误 - 未能在IE中设置HtmlInputElement的值是正确的。错误消息＆＃39;不安全操作＆＃39;在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属性引起的吗？

＆＃13;

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=";
}

＆＃13;

<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>

＆＃13;

如何在AngularJS中显示base64图像

2 个答案: