ExpressJS: Retrieving images from MongoDB and displaying them in Jade

I am looking for good ways to retrieve images from MongoDB and display them. For example, to retrieve a profile picture and display it on a profile page, this is how I am currently doing it:

profile page

block content
  h1= session.user.name
  img(src='/avatars')

routes

exports.avatars = (req, res) ->
  users.find req.session.user, (err, user) ->
    if user
      res.writeHead('200', {'Content-Type': 'image/png'})
      res.end(user.avatar.data, 'binary')
    else
      res.locals.flash = err
      res.render('index', {title: 'Home'})

Basically I render the profile page, and the img tag sends a request back to the server to pick up the picture of the user from the database. Im saving the images as BinData in MongoDB. Not using GridFS because I expect the pictures to be small.

Is there a better way to do this?? I tried to send the image data directly to the jade view using res.render('users/show', {picture: data}) but the img tag didn't like that and I'm not clear on why. Is this approach a dead end?

Any comments/suggestions would be much appreciated. Thanks!

Sending the image data directly to jade view would work if

a) you base64 encoded the image data

b) prefixed with "data:"

But I would not recommend you do this way, you essentially in-lining the image in your html.

You should instead create a separate route to handle your images/avatars.

For example the image source for your avatars should be something like

img(src='http://mydomain.com/avatars/user1.jpg')

When the browser requests this image you then respond with image data retrieved from mongo.