离子/ 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变量会阻止它绑定到图像元素会发生什么？这是离子的吗？一个角度问题？

Answer 1

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

在你的控制器中设置base64字符串，如下所示： $scope.data.image_url=<your base64 image source>

希望这有帮助！

Answer 2

我有同样的问题，通过以这种方式配置主角度模块白板来解决它：

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

Answer 3

有时我也会遇到问题，请使用setTimeout或$timeout。

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

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

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

Answer 4

只需在div处使用ng-if，然后在加载数据后立即呈现img标记