I have a collection of images, each containing its base64 encoded data within an s3 file.
For example:
The issue arises when trying to directly link to the image like this:
<img src="https://s3.eu-central-1.amazonaws.com/sensicityissues/1483573056505-61946" />
In such cases, the image fails to load.
To make it work, I must utilize the following approach:
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 method works, but it presents two major challenges:
CORS issues, which are currently being resolved with
http://cors.io/?${url}. This is not ideal as it slows down image loading and could lead to webpage failure ifcors.iobecomes inoperative.When using this process for multiple images, all base64 encoded strings remain in memory causing potential memory-related problems.
Is there a better solution to address these concerns without changing the way images are stored in s3?
(Note: The storage format in s3 cannot be altered.)
Thank you for any guidance on this matter.