Ионное/AngularJS base64 изображение не будет отображаться

Question

Я пытаюсь просто показать изображение base64 в приложении Ionic.

Изображение не будет отображаться, если я это сделать:

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

Иногда я тоже сталкиваюсь с проблемой и использую setTimeout или $timeout.

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

В угловом способе (добавить $timeout DI в контроллере) -

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

Answer 3

я была такая же проблема, решить ее путем настройки основного углового модуля с белым списком таким образом:

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

Answer 4

просто использовать ng-if в DIV, а затем IMG тег визуализируется как только данные загруженный