angularjs ng-repeat image base64 from firebase

Question

I have a collection of images base64 stored in a database firebase. The problem is that when the application fee ng-repeat takes about 20 seconds to show the images, I attached my code, can you help me please?

controller



    $scope.itinerarios = itinerariosFactory.getAll();

service



    .factory('itinerariosFactory', ['$firebase',
      function($firebase) {

        var ref = new Firebase('my firebase url');

        var itinerariosFactory = {
          getAll: function () {
              return $firebase(ref.child('itinerarios/')).$asArray();
          }
        };

        return itinerariosFactory;

      }])

view


    img ng-repeat="imagen in itinerario.imagenesSlider" data-ng-src="data:image/jpeg;base64,{{imagen.base64}}" width="100%"

You will have to do a bit more before we can help you here Cristian. Can you set up a minimal, self-contained, verifiable example (see stackoverflow.com/help/mcve)? E.g. if you set up a separate Firebase database for this and reproduce the problem in a jsfiddle/jsbin, we can see if we're getting the same results and help troubleshoot. Without that, I recommend digging into where the time is going. How long does it take to get data from the network? How big are the images? How many are there? How long does decoding the base64 take? Etc. — Frank van Puffelen
@FrankvanPuffelen I share the code in codepen, I hope you can help me , thanks codepen.io/anon/pen/MwZZxw?editors=101 — Cristian Droguett
The run-frame of that pen takes in total 7 seconds to load for me. The first base64 image is loaded at 4s in, the last at 6s in. So I don't think the performance problem is coming from that. How long does loading/running that pen take for you? Can you share a waterfall chart of the loading? — Frank van Puffelen
@FrankvanPuffelen link here is the timeline, the strange thing is that when the load from FireBase is not done immediately displayed images , for example : $scope.itinirarios: [{image: '9d/s...'},{image: '9d/...'},{image: '9d/s...'}]; — Cristian Droguett
Most likely, it's a simple matter of bytes. What is the byte count of the images? Does that add up appropriately for the internet speeds you're working on? — Kato

Qwertiy Qwertiy · Accepted Answer · 2015-08-03T15:51:18

Not sure if it helps, but you have to try (if you are using angular 1.3+)

data-ng-src="data:image/jpeg;base64,{{::imagen.base64}}"

Anyway, I don't think it's a good idea to add images in this way. Try adding a custom directive instead.

angularjs ng-repeat image base64 from firebase

1 Answers