0

I am working on a web app, and I am creating a user profile page in which I want to load in user information, and display a profile picture. I am using node/express/jade. I have a javascript file that handles what jade view should be loaded when a tab is clicked. For example, if the profile Page tab is clicked, I use jquery post methods to load up data to the user. I want to load up pictures, but I am not sure exactly how the html/or jade form would look like for this, or how I would post the picture from a database using my javascript file.

Should I even use the same javascript file that I am using to post the image? Or Is there another way to load in the image?

I have seen this solution, but I wanted to know if it is possible to do so in the manner described.

Community
  • 1
  • 1
  • depends on where you have the image stored. If its stored in the file structure and not the database. You'll just have reference the image with an img tag. Otherwise it'll require you to pass image from nodejs. – Calvin Feb 06 '14 at 20:36

1 Answers1

2

Well, if your question is about server-side templating, this should do the trick:

You would need a img tag like so:

img(src="<url to get method for user's profile picture>")

And in Express, you would need a route handler such as:

app.get('/profile/image', function(req, res){

     //some code to find the path to the image associated with some user

     var img = fs.readFileSync('path to file');
     res.writeHead(200, {'Content-Type': 'image/gif' });
     res.end(img, 'binary');
})

You could also use the async method and write the file to the response on the callback.

By the way, have you seen Gravatar? Using Gravatar will produce a similar solution, but you can escape the need to store and serve image files.

Josh C.
  • 4,303
  • 5
  • 30
  • 51