Ionic / AngularJS基于base64编码的图像无法显示

Question

我正在尝试在Ionic应用程序中显示一个base64图像。

如果我这样做，图片将不会显示：

HTML：

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

控制器：

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

但是如果我直接将编码后的字符串放入图像元素中，图像就会显示出来：

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

我已经检查了每一个不安全的安全设置，查看了其他数十个SO帖子等等。如果我把这个小例子放在CodePen中，它两种方式都可以工作。

是什么导致$scope.myImage变量无法绑定到图像元素？这是ionic的问题还是angular的问题？

- lilbiscuit

---

以下是服务时HTML的外观：<img ng-src="data:image/jpeg;base64," src="data:image/jpeg;base64,"> - lilbiscuit

Answer 1

使用data-ng-src指令，像这样： <img data-ng-src="{{data.image_url}}">。

在您的控制器中将base64字符串设置为此值：$scope.data.image_url=<您的base64图像源>

希望这可以帮助您！

- Bipin Bhandari

Answer 2

我曾经遇到过同样的问题，通过以下方式配置主要的Angular模块白名单解决了它：

angular.module('app').config(function ($compileProvider) {
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https|ftp|mailto|file|tel|data)/);})

- eladHayun

Answer 3

有时候我也会遇到这个问题，然后使用 setTimeout 或者 $timeout。

setTimeout(function(){
   $scope.myImage= "/9j/4AAQSkZJ ...";
}, 2000);

以Angular的方式（在控制器中添加$timeout DI）-

$timeout(function(){
   $scope.myImage= "/9j/4AAQSkZJ ...";
}, 2000);

- swapnesh

---

有趣的想法，但计时器没有效果。 - lilbiscuit

@lilbiscuit 你能否请粘贴你的base64编码数据？ - swapnesh

我已经确定我的应用程序中存在冲突。如果我从一个空白项目开始，我就不会遇到这个问题。 - lilbiscuit

Answer 4

只需在 div 中使用 ng-if，然后 img 标签会在数据加载完成后立即呈现。

- user2834172