问题回顾 #

你在product-list.pug里循环生成产品卡片时，遇到了一个典型的Pug语法小问题：明明给img标签的src绑定了product.imageUrl变量，但渲染后的HTML里却直接显示#{product.imageUrl}字面量，完全没解析成你设置的外部链接。你的代码大概是这样的：

each product in prods
  .card
    h3 #{product.title}
    p
      img(src='#{product.imageUrl}', alt="#{product.imageUrl}")
    p #{product.price}
    p #{product.description}

问题出在哪？ #

这是因为你用单引号/双引号把#{product.imageUrl}包起来了！在Pug的属性语法里，用引号包裹的内容会被当成纯文本字符串，不会去解析里面的变量插值。简单说，Pug以为你就是要把#{product.imageUrl}这串字符当作图片地址，自然不会替换成实际的URL。

怎么解决？ #

方法1：直接绑定变量（最推荐） #

Pug支持直接用=来绑定属性值，这种写法下，后面的内容会被当作JavaScript表达式解析，所以直接写变量名就行，完全不需要#{}和引号：

each product in prods
  .card
    h3 #{product.title}
    p
      img(src=product.imageUrl, alt=product.imageUrl)
    p #{product.price}
    p #{product.description}

改完之后，Pug就会自动把product.imageUrl的真实值渲染到src和alt属性里，你的外部图片链接就能正常显示了。

方法2：需要字符串拼接时的写法 #

如果你的图片URL需要加固定前缀（比如站点的资源目录），可以用ES6模板字符串（用反引号包裹），或者原生的字符串拼接：

模板字符串写法（更直观）：

img(src=`/assets/images/${product.imageUrl}`, alt=product.imageUrl)

原生拼接写法：

img(src='/assets/images/' + product.imageUrl, alt=product.imageUrl)

小总结 #

记住Pug属性的这两个核心规则：

• 用=绑定属性值时，内容是JS表达式，直接写变量/表达式就行
• 单/双引号包裹的属性值是纯文本，不会解析插值
• 复杂拼接优先用ES6模板字符串，可读性更高

内容的提问来源于stack exchange，提问作者Alex