Angular: image won't display once retrieved [duplicate]

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?

starcorn · Accepted Answer · 2016-04-10 21:25:39Z

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, 2016 at 21:25

starcorn

8,61123 gold badges88 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user5854440 Over a year ago

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.

starcorn Over a year ago

Unless you know the actual path to the image, then perhaps the comment made by Daniel Beck is a possible solution for you.

Community · Accepted Answer · 2017-05-23 11:45:05Z

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, 2017 at 11:45

CommunityBot

11 silver badge

answered Apr 10, 2016 at 21:49

SirCapy

2951 silver badge12 bronze badges

Comments

Ali Adravi · Accepted Answer · 2016-04-10 22:10:14Z

0

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\//);

answered Apr 10, 2016 at 22:10

Ali Adravi

23k9 gold badges93 silver badges97 bronze badges

Collectives™ on Stack Overflow

Angular: image won't display once retrieved [duplicate]

3 Answers 3

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Linked

Related