Html 如何在AngularJS中显示base64图像

再次需要帮助；）

我想在我的页面上展示一张照片。这是我的步骤

RESTAPI从后端MongoDB获取文档/记录。base64映像按如下方式存储

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

情况：

如果我使用“img srcs={{file_src[I]}}”，我会得到不安全的操作。我的RESTAPI服务器已启用CORS。由于图像是base64数据，没有任何URL，我不知道它与CORS有关

我搜索了一下，找到了ng src和数据ng src指令。他们两个都不工作。请参阅下面我的绑定错误

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

------国际中心要求的代码--------

请参阅console.log。它表明这个.u文件是有效的

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

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

如果我注释掉“img src”上方的“input type=file…”行，如下所示，我可以看到照片。我的输入有什么问题？对不起，我不记得那是什么输入

因此，我的问题可能不在照片中，而是在输入线上；）我真丢脸

                <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内容，如下所示：

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

然后在视图上显示它

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

---

我经常使用base64映像，以前从未看到过该错误。它是由

交叉原点

属性引起的吗

angular.module（'test'，[]）。controller（'test'，test）；
功能测试（$范围）{
$scope.base64="数据：图像/png；Bas64，IBoBorw0，一个巴巴巴新的巴巴巴新的巴巴新的巴巴新的巴新的巴新数据：图像数据：图像/巴新的巴巴新；基础64，一个巴新的巴新的巴新的巴新的巴新的巴新的巴新的巴新的巴新的巴新的巴新的AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQQQQQQQQQQQQQQQQQ4-4-WWWWWWWWWWWWWWWWWWWWWWWWWWWW3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 GBOYxVZ23HR+apyVcO+JQ2HCKLLL7WCT31RBBGRBU93FUTCBFSDZDLOZTILLBPWQ90JOQR8AU8VFIQFLZECAAAASUVORK5CYII=“；
}

分享你的代码，你是如何从服务器获取图像的？谢谢lcycool。尽管我删除了crossorigin属性，但我还是遇到了同样的不安全操作错误。嗨，Vic，谢谢！如果我使用“data ng src”“，我收到此错误-->错误：模板分析错误：无法绑定到'ng src'，因为它不是'img'的已知属性。@Autorun您可以共享代码吗？”？我对你的问题也发表了同样的评论，再次感谢。是的，我可以分享我的代码。既然有很多代码，我该如何共享？这只是一小部分。请看上面的代码。

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

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

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