Clever Geek Handbook

How do I get and send an image in Angular JS?

I have a url from which I am trying to get an image. I am using the method $http.get()

, but I get a binary response. How can I get something back that I can insert into the page?

$http.get('https://exampleurl/images/' + $scope.element[i].id)
                            .success(function (response) {
          // I have response such as: ""    JFIF``  ;CREATOR gd-jpeg v1.0 (using IJG JPEG v80)"
                            });
+3


source to share


2 answers


Create an item img

and don't use $http.get

.



var imageElement = angular.element('<img />').attr('src', yourUrl);
// insert imageElement somewhere else
0


source


First, you asked for:

How do I get and send an image in Angular JS?

So let's take a look at both ... Actually, we have 3 problems: the third is a bug. You already said:

but get a binary answer

If you can just get a "binary" URL, that means the HTTP response has some lack of CONTENT-TYPE for the correct MIME-TYPE. You need to solve this with

Content Type: image / jpeg

Good?

HOW TO SEND PHOTOS



Don't convert it to base64 if the design pattern matters to you. Because you just need to handle REST correctly. Also, you cannot increase the size of the POST request by converting BLOBs to BASE64 code.

It has one JavaScript resource called FormData for God's sake.

Take a look here: Uploading Files with Multiple Data Files / Forms with AngularJS

.directive('fileModel', ['$parse', function ($parse) {
return {
    restrict: 'A',
    link: function(scope, element, attrs) {
        var model = $parse(attrs.fileModel);
        var modelSetter = model.assign;

        element.bind('change', function(){
            scope.$apply(function(){
                modelSetter(scope, element[0].files[0]);
            });
        });
    }
};
}]);

You can also find out with jQuery:

var fd = new FormData(document.getElementById("fileinfo"));
fd.append("CustomField", "This is some extra data");
$.ajax({
url: "stash.php",
type: "POST",
data: fd,
processData: false,  // tell jQuery not to process the data
contentType: false   // tell jQuery not to set contentType
});

HOW TO GET THE IMAGES

Why can't you just tag? IMG elements can load it without any glitches. You just need urls.

0


source






More articles:


All Articles