node.js - Pug/Jade interpolation not working for attributes

Question

I have a page which I am rendering like this:

res.render('account.pug', {user: req.user._id})

—and which is supposed to show a profile picture which corresponds to the user like this:

img(id='profilepicture' src='profilepictures/#{user}')

However, the Pug renders as:

<img id='profilepicture' src='profilepictures/#{users}' />

—instead of:

<img id='profilepicture' src='profilepictures/USERID' />

—so the correct profile picture does not display.

It is weird because when I write div #{user} it renders correctly as <div>USERID</div>, so it clearly has something to do with it being that I am interpolating on an attribute mid-string. I have tried using back ticks instead of quote marks but this did not work either.

Answer 1

As noted in the Pug documentation, the #{foo} interpolation syntax is no longer supported in attributes.

Instead of using—

img#profilepicture(src='profilepictures/#{user}') // no longer supported

—you can use (as @Shinigami points out):

img#profilepicture(src='profilepictures/' + user) // supported

Or, if you have ES6 support, you can use template strings:

img#profilepicture(src=`profilepictures/${user}`) // supported

(Note that the last one uses ${} instead of #{})