We Keep Coding

AngularJS: Load base64 image from a file

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.

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.

can we store ng-bind values to php string

First,I am very new to angularjs.I have some knowledge of PHP.
I was wondering if we can store can store ng-bind values to php string.
Lets say:
<li ng-if="jSEO.resources[3][0][0]"> <span> Internal Links:</span> <font color="#000000" size="+2" ng-bind=" jSEO.resources[3][0][0]"></font> </li>
Can we take the ng-bind value on a php string and then we can insert it to db.
I tried doing this trick but failed.
Any suggestions/code hints are highly appreciated

There are 2 ways you can achieve this.
Create a PHP API and write some javascript to post the value to the API. Have a look at the angular $httpProvider
Create a hidden input in a form and set the value of the input to the angular value. That does defeat the purpose of using Angular though.
<input type="hidden" name="myAwsomeValue" value="{{jSEO.resources[3][0][0]}}" />

process angular function on view renedring

i have image url in this format in database
http://www.nobrok.com/roomrent1/public/uploads/5269/b4a3263f52c1c4725096ee299fa2c64051cb9b4d.jpg::
i am trying to pass image url to a angular controllers method like this
<img src="sizeImg(comment.pictures)">
and i have written a function to process the url like this
$scope.sizeImg = function(pictures){
return 'http://www.nobrok.com/roomrent1/public/uploads/5269/b4a3263f52c1c4725096ee299fa2c64051cb9b4d.jpg';
}
but the function is not working

You can't pass javascript directly into into src, and the angular documentation for ngSrc mentions "Using Angular markup like {{hash}} in a src attribute doesn't work right now" Try ng-src.
<img ng-src="{{ sizeImg(comment.pictures) }}">
https://docs.angularjs.org/api/ng/directive/ngSrc
Codepen example: http://codepen.io/anon/pen/gfvIr

AngularJS doesn't update img src when model changes

I use ng-src to load images. Value is loaded from some scope variable, like this:
<img ng-src="{{currentReceipt.image}}"/>
My issue is that when I run delete $scope.currentReceipt, it makes ng-src attribute empty but doesn't reflect it in src attribute. So as a result I keep seeing that image where I need empty placeholder.
How can I deal with it?

This is the expected behaviour from the ngSrc and ngHref directives. These directives only support recognising new paths, but when path is not available, the directives will exit silently (I see a pull request here.).
So a possible workaround could be to use ngShow along with the ngHref to hide the tag altogether when image variable is not available anymore:
<img ng-href="{{currentReceipt.image}}" ng-show="currentReceipt.image" />

call $scope.$apply() after delete $scope.currentReceipt.

The following solution works for me:
<img ng-src="{{currentReceipt.image}}" ng-show="currentReceipt.image != null" />

You can actually check for length and do
<img ng-show="user.thumbnail.length > 1" class="img-circle thumb pull-left" ng-src="{{user.thumbnail}}" alt="{{user.firstname}} {{user.lastname}}">

AngularJS - Show byte array content as image

I'm searching into my database a image as a byte array. I want to show this content as file using the markup image, but it doesn't work here.
// Controller which get my image and put into $scope.
function MyController($scope, $http, $location) {
var url = '/json/FindImage?id=1';
$http.get(url).success(function(result) {
$scope.image = result.Image;
}
}
// HTML
<!-- It doesn't work -->
<img src="{{image}}" />
<!-- It doesn't work also -->
<img ng-src="{{image}}" />
Any idea?
Thank you all!

Use ng-src in the following format
<img ng-src="data:image/JPEG;base64,{{image}}">
Don't forget to add a sanitization filter for data to not be marked as unsafe by angular:
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|file|ftp|blob):|data:image\//);

If you can get your server to return the image in a base64 encoded string, you could use a data url as the src attribute.

Make sure The Data you are returning to show as a image is converted to
ToBase64String
In your C# code, Use Convert.ToBase64String(imageBytes) and in the view use this

The src attribute of img points to the source file of the image, it doesn't contain the actual source data. You can't do what you want this way; instead, you would have to write an image decoder in JavaScript (e.g., https://github.com/devongovett/png.js), which outputs into a canvas element.