问题描述
我有一个我正在渲染的页面:
res.render('account.pug', {user: req.user._id})
——应该显示与用户对应的个人资料图片,如下所示:
img(id='profilepicture' src='profilepictures/#{user}')
但是,Pug 呈现为:
——代替:
——因此不会显示正确的个人资料图片.
这很奇怪,因为当我写 div #{user}
时,它正确地呈现为
,所以它显然有一些事情要做因为我正在插入一个属性中间字符串.我曾尝试使用反引号代替引号,但这也不起作用.
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 插值不适用于属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!