Pug/Jade 中的 IMG 标签——错误回复：嵌套内容答案

【问题标题】：IMG tags in Pug/Jade -- error re: nested contentPug/Jade 中的 IMG 标签——错误回复：嵌套内容
【发布时间】：2016-06-11 14:33:13
【问题描述】：

我正在使用 Pug 构建一个组件，但一直收到 img 元素的错误。下面是相关代码（CSS 类是 Tachyons'）：

.fl.w-100.w-75-ns.tc.pa3.pb4.right-col
.f1 COLUMN TWO
  .br2.ba.dark-gray.b--black-10.mv4.w-100.w-50-m.w-25-l.mw5.center
    img.db.w-100.br2.br--top(src='assets/img/img.svg')
      .pa2.ph3-ns.pb3-ns
        .dt.w-100.mt1
          .dtc
            h1.f5.f4-ns.mv0 TITLE
          .dtc.tr
            h2.f5.mv0 PRICE
        p.f6.lh-copy.measure.mt2.mid-gray DESCRIPTION GOES HERE

当我尝试编译它时，我收到以下错误：

events.js: 160
      throw er; // Unhandled 'error' event
      ^
Error: /$workdir/$proj_7/_pugfiles/_03.pug:8
img is a self closing element: <img/> but contains nested content.

我想不通。我想也许 svg 有问题，但事实并非如此。我想也许它需要alt 属性，但事实并非如此。也许是压痕，但我也没有运气摆弄它。有什么想法吗？

【问题讨论】：

AFAIK，您不能将内容嵌套在 <img> 标记内，这是您遇到的错误。也许您只需要将img 之后的行缩进一级？

标签： pug pugjs

【解决方案1】：

图像元素中不能有其他 HTML。这就是问题所在。

所以当你有

img.db.w-100.br2.br--top(src='assets/img/img.svg')
    .pa2.ph3-ns.pb3-ns

Pug（前 Jade）会这样解释

<img class="db w-100 br2 br--top" src="assets/img/img.svg">
    <div class="pa2 ph3-ns pb3-ns">
    ...
</img>

那是无效的 HTML。所以 Pug 没有这样做，而是给你一个错误。

我不知道您希望 HTML 看起来如何，但也许我的示例中的这两个元素应该是兄弟元素？（即在同一级别）像这样：

.fl.w-100.w-75-ns.tc.pa3.pb4.right-col
.f1 COLUMN TWO
  .br2.ba.dark-gray.b--black-10.mv4.w-100.w-50-m.w-25-l.mw5.center
    img.db.w-100.br2.br--top(src='assets/img/img.svg')
    .pa2.ph3-ns.pb3-ns
      .dt.w-100.mt1
        .dtc
          h1.f5.f4-ns.mv0 TITLE
        .dtc.tr
          h2.f5.mv0 PRICE
      p.f6.lh-copy.measure.mt2.mid-gray

【讨论】：

【解决方案2】：

img.db.w-100.br2.br--top(src='assets/img/img.svg')
  .pa2.ph3-ns.pb3-ns
     .dt.w-100.mt1

不正确。这样做：

img.db.w-100.br2.br--top(src='assets/img/img.svg')
.pa2.ph3-ns.pb3-ns
  .dt.w-100.mt1

查看第 2 行代码中的差异 Pug/Jade 通过您的缩进制作标签。 tag 没有一对，并且不应该比 itseltf 更差的边距

【讨论】：