Using AngularJS to show images from API (flask app)

Question

I'm trying to show some badge images I made for a RANK APP I've been working for. It's 10 images that should be shown specific for each driver.

I'm not an expert on coding, but I keep searching and studying ways to solve the problem I've been through.

I firstly tried to send base64 images from the API to the browser, using this code:

<!-- language: python -->

for img in imglist: #loop for creating a list of base64 images from a list of image dir.
        imgcode = base64.encodestring(open(imgdir + img,"rb").read())
        imgcodelist.append(imgcode)

for driver in sortdriverList: #loop for taking drivers points and turn it into RANK img
            if (driver['Races'] < 21): 
                driver['Rank'] = str(imgcodelist[9])
[...]

The second loop is longer than that, stil what I've shown to you above makes any driver that wasn't participating in more than 21 races, be part of a 'NON CLASSIFIED' badge.

I used AngularJS to try to show the base64 image using the code below.

'<html>'

<td><img src="data:image/png;base64,{{ '{{driver.Rank}}'}}"></td>

[driver.Rank] should be the base64 code string. When I run the app, the image is not shown, instead I see the very code of the image inside the table =/

Then I tried to turn [driver.Rank] into a dir string for "img src=", using the codes below.

<!-- language: python -->

imglist = ["notclassified.png", etc...]
imgdir = "static/images/"  
for item in sortdriverList:
            if (item['Races'] < 21):
                item['Points'] = imgdir + imglist[9]

and in my HTML I changed the img src to:

'<html>'

<img src= {{ '{{driver.Rank}}' }}>

and now it shows the directory of the images. I've been searching for CSS ways to make it possible.

I coudn't find a solution yet.

Have you tried ng-src instead of src in the angular app? stackoverflow.com/a/27554837/1038301 — Roomm
– Roomm, Commented Feb 7, 2018 at 16:01
I noticed, I think img should be <img ng-src="{{driver.rank}}"> — Roomm
– Roomm, Commented Feb 7, 2018 at 16:09
@Roomm it does the same =/. I inspect the page in chrome, and somehow the img tag is being overpassed by the ng-binding. I think it may be happening because I'm using a plug-and-play addon for AngularJS named "dir-paginate" — Ramon Barros
– Ramon Barros, Commented Feb 7, 2018 at 16:21

blackbox · Accepted Answer · 2018-02-07 16:53:02Z

1

It's hard to tell what's going on since only segments are pasted, but I'm guessing it has to do with how you are escaping the code. Maybe you could paste the generated code in chrome.

Sometimes seeing a working example helps.

angular.module('App', [])
  .controller('DriverCtrl', DriverCtrl);

function DriverCtrl($scope) {
  // base64 encode 1x1 black pixel
  this.Rank = 'R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=';
}

<div ng-app="App">
  <div ng-controller="DriverCtrl as driver">
    <div>Rank: {{driver.Rank}}</div>
    <span>Image:</span>
    <img ng-src="data:image/png;base64,{{driver.Rank}}">
  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

answered Feb 7, 2018 at 16:53

blackbox

864 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ramon Barros Over a year ago

I'm very new to front end stuff. Your working example wasn't different from what I've seen in the internet. I'm happy I could manage the code, and now everything is working crystal clear.

Collectives™ on Stack Overflow

Using AngularJS to show images from API (flask app)

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related