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 变量会发生什么情况会阻止它绑定到图像元素？是离子的东西吗？ angular 个问题？

Answer 1

有时我也遇到这个问题，并使用setTimeout或$timeout。

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

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

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

Answer 2

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

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

希望对您有所帮助！

Answer 3

我遇到了同样的问题，通过以这种方式配置具有白名单的主 angular 模块解决了这个问题：

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

Answer 4

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

Ionic / AngularJS base64 image won't display