AngularJS: Load base64 image from a file

Question

I have a list of images, but every image have a s3 file with his base64 encoded inside this file.

Example of image:

• https://s3.eu-central-1.amazonaws.com/sensicityissues/1483573056505-61946

The problem is that if I did something like this:

<img src="https://s3.eu-central-1.amazonaws.com/sensicityissues/1483573056505-61946" />

The image is not loaded.

If I want that this works in this way I need to do something like this:

HTML:

<div ng-init="vm.loadImage(image, image.url)">
    <img ng-if="image && image.src" data-ng-src="{{image.src}}" width="60" />
</div>

JS:

self.loadImage = (img, url) => {
    $http.get(`http://cors.io/?${url}`)
      .then(r => (img.src = r.data))
}

This is working... Okey... But I have 2 big problems with this:

• CORS problems, that I need to resolve with http://cors.io/?${url}. For me is not a good solution because is a slowly way to load all the images and if some day cors.io stops working, my webpage neither will work...

• If I load an amout of images with this way, all the base64 encoded strings are in memory and the page will have a several memory problems.

Is there another solution to implement this avoiding these big problems?

(I can't change how images are saved in s3...)

Thank you so much.

Answer 1

You can find an example on this fiddle. Also, on this question you can find out the way to load base64 images.

<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

You can't mix http schema that gives you a non byte response as your src attribute value.

You gonna need to build a backend feature in order to serve you these images to your front end app through your own url.