Pug/Jade 插值不适用于属性 [英] Pug/Jade interpolation not working for attributes

问题描述

我有一个我正在渲染的页面:

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

——应该显示与用户对应的个人资料图片，如下所示:

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

但是，Pug 呈现为:

——代替:

——因此不会显示正确的个人资料图片.

这很奇怪，因为当我写 div #{user} 时，它正确地呈现为

USERID

，所以它显然有一些事情要做因为我正在插入一个属性中间字符串.我曾尝试使用反引号代替引号，但这也不起作用.

解决方案

As 在Pug 文档，属性中不再支持 #{foo} 插值语法.

而不是使用——

img#profilepicture(src='profilepictures/#{user}')//不再支持

——你可以使用(正如@Shinigami 指出的那样):

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

或者，如果你有 ES6 支持，你可以使用 模板字符串:

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

(注意最后一个使用了${} 而不是#{})

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.

解决方案

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 #{})

这篇关于Pug/Jade 插值不适用于属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！