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: 
As [noted in the Pug documentation](https://pugjs.org/language/attributes.html#attribute-interpolation), 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals):

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

```

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

```
img#profilepicture(src='profilepictures/' + users)

```

Docs: <https://pugjs.org/language/attributes.html>

Helpful Site: <https://pughtml.com>