Angular: image won't display once retrieved

Question

I'm using angular to make a http.get request to retrieve an image I have stored on the backend. Problem is once I get it, I don't know how to display it. Here's my code:

Node:

getImage = function(req, res){
    res.setHeader('Content-Type', req.query.mimetype)
    fs.createReadStream(path.join('./uploads/', req.query.filename)).pipe(res)
}

Angular

$http.get("/getImage/", {params: {"filename" : $scope.recipe.image.filename, "mimetype" : $scope.recipe.image.mimetype}})
.then(function(returnData){
    $scope.image = returnData.data;
})

HTML:

<img ng-src="{{image}}">

I've used console.log to attempt to display what is coming back, and this is what I get:

I'm guessing that's the image, but again, I don't know how to properly display it. Any tips?

score 0 · Answer 1 · answered Apr 10 '16 at 21:25

0

Looking at what you try to do. You should get the filename-url of that image rather than using the actual "image" when you use it <img ng-src="{{image}}"> tag

answered Apr 10 '16 at 21:25

starcorn

8,261
23
83
124

But how do I send the parameters back to retrieve the right image then? Because the URL is just `/getImage/`. And if I try to use the path to the image, it just gives me a 404 error. – user5854440 Apr 10 '16 at 21:39
Unless you know the actual path to the image, then perhaps the comment made by Daniel Beck is a possible solution for you. – starcorn Apr 10 '16 at 21:46

score 0 · Answer 2 · edited May 23 '17 at 11:45

0

I think for your purposes you should use async image upload. So you can use deffered objects: Asynchronously load images with jQuery please look on "phpcoding" answer

edited May 23 '17 at 11:45

Community

1
1

answered Apr 10 '16 at 21:49

SirCapy

295
1
12

score 0 · Answer 3 · answered Apr 10 '16 at 22:10

You are getting byte array from database, use

<img ng-src="data:image/JPEG;base64,{{image}}">

Add sanitization filter for data to not be marked as unsafe by angular

$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|file|ftp|blob):|data:image\//);

Angular: image won't display once retrieved

3 Answers3