Angularjs: отображать удаленно сгенерированное изображение после другого запроса https

Question

Добрый день всем. Я столкнулся с небольшой проблемой. Я делаю страницу, используя Angularjs (1.6), на одной из страниц мне нужно получить некоторые данные с сервера, а затем мне нужно сделать еще один вызов для генерации qrcode, который будет возвращен в виде изображения png с сервера .

Я сделал следующее:

function generateQrCode (){

       if (vm.detail !== null) {
            return myService.getQrCode(vm.detail.mydata.lockers[0]);
        }
        return null;

    };


vm.$onInit = function () {
            vm.id = $stateParams.id;
            vm.barcode = null;
...

myService.getmyDetail(vm.id).then(function (response) {
            vm.detail = response.data;
            vm.barcode = generateBarcode()
...

Тогда в шаблоне у меня есть:

 <img ng-src="{{detailCtrl.barcode}}">

Я вижу вызов, сделанный службой, которая возвращает изображение PNG (не URL, а данные PNG), на внешнем интерфейсе ничего не происходит, я имею в виду сломанное изображение, проверяющее, что оно возвращает:

<img ng-src="{}">

где я ошибаюсь?

услуга возвращается:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQAQAAAACoxAthAAABUklEQVR42u3auxGDMAyAYXMpUmaEjMJoZLSMwgiUKXJRiB8gk8fBHbZS/Kp4fZ3OsoSdbA4HgUAgEAgEAoFAILuRh5ujFRlcdx+v5KYeQyD1ySle3QIZ4xxvfPQQiAm5uJC87SutUyb7G3eAQKxJXGBDJkMg/0JELv4rCMSaqLqfSv2GrQIEUoCoLsmndczklY0VBFKAZDFvR1ePoSCQAmSq7irOEgZMfhMAgZiR8cFRrs30elxgm591HwIpSHy+LpI3fDVvAiAQAyJ+jJT8IR/HOwjEhkio+1mX1Ma2vodArIgaML3SOmwChlXNOwSyO1nMlFz4MZSnNQRSnagJ/DRTSpncfZ4pQSDliTrdcdIt0/D9LBwEUo3IlLzpf6XunyAQE+IX2LkxGvQNBFKX5HX/bRMAgdQni9Md2aGjNY0VBLI72RAQCAQCgUAgEAgEYkKezTXAEZxxE/MAAAAASUVORK5CYII=

Answer 1

вы получаете данные изображения в формате RAW, который вы должны показать, используя dataNgSrc директива

например:

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

Вот рабочий пример

var app = angular.module('app',[]);

app.controller('ctrl',ctrl);

function ctrl($scope) {
    $scope.image ="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQAQAAAACoxAthAAABUklEQVR42u3auxGDMAyAYXMpUmaEjMJoZLSMwgiUKXJRiB8gk8fBHbZS/Kp4fZ3OsoSdbA4HgUAgEAgEAoFAILuRh5ujFRlcdx+v5KYeQyD1ySle3QIZ4xxvfPQQiAm5uJC87SutUyb7G3eAQKxJXGBDJkMg/0JELv4rCMSaqLqfSv2GrQIEUoCoLsmndczklY0VBFKAZDFvR1ePoSCQAmSq7irOEgZMfhMAgZiR8cFRrs30elxgm591HwIpSHy+LpI3fDVvAiAQAyJ+jJT8IR/HOwjEhkio+1mX1Ma2vodArIgaML3SOmwChlXNOwSyO1nMlFz4MZSnNQRSnagJ/DRTSpncfZ4pQSDliTrdcdIt0/D9LBwEUo3IlLzpf6XunyAQE+IX2LkxGvQNBFKX5HX/bRMAgdQni9Md2aGjNY0VBLI72RAQCAQCgUAgEAgEYkKezTXAEZxxE/MAAAAASUVORK5CYII=";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
    <img data-ng-src="{{image}}">
</div>