Angularjs: display a remotely generated image after another https request

Question

I'm facing a little problem. I'm making a page using Angularjs (1.6). On one of the pages, I have to retrieve some data from the server and then I have to make another call to generate a QR code which will be returned as a png image from the server.

what I've done is:

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()
...

Then, in the template I have:

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

I can see the call done by the service, that is returning a png image (not the URL but the png data), on the frontend nothing happens, I mean there is a broken image and inspecting it returns:

<img ng-src="{}">

where am I mistaken?

the service is returning:

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

Answer 1

you receiving an image data as that is an RAW format you must show it by using dataNgSrc directive

for example:

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

Here a working example

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>