Ionic/AngularJS base64图像不会显示 [英] Ionic / AngularJS base64 image won't display

问题描述

我试图在Ionic应用程序中简单地显示base64图像.

I am trying to simply display a base64 image in an Ionic app.

如果执行此操作，则图像不会显示:

The image won't display if I do this:

HTML:

 <img ng-src="data:image/jpeg;base64,{{myImage}}"/>

控制器:

$scope.myImage= "/9j/4AAQSkZJ ...";

但是如果我将编码后的字符串直接放在图像元素中，图像将显示如下:

But the image WILL display if I just put the encoded string directly in the image element like this:

 <img ng-src="data:image/jpeg;base64,/9j/4AAQSkZJ ..."/>

我已经检查了所有不安全的安全设置，查看了许多其他的SO帖子，等等.如果我将这个小示例放在CodePen中，则它可以双向工作.

I have checked every unsafe security setting, looked at dozens of other SO posts, etc. If I put this small example in a CodePen, it works both ways.

$scope.myImage变量会发生什么情况，阻止它绑定到图像元素?是离子的东西吗?有问题吗?

What could be happening to the $scope.myImage variable that would prevent it from binding to the image element? Is it an ionic thing? An angular issue?

推荐答案

使用data-ng-src指令，例如<img data-ng-src="{{data.image_url}}">.

在您的控制器中，将base64字符串设置为: $scope.data.image_url=<your base64 image source>

In your controller set base64 string as this: $scope.data.image_url=<your base64 image source>

希望这会有所帮助！

这篇关于Ionic/AngularJS base64图像不会显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！