1

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属性が必要なのかなと思ったのですが、そうではありません。多分それはインデントかもしれませんが、運が悪かったのでそれをいじりました。何か案は？

4

2 に答える 2

4

画像要素の中に他の HTML を含めることはできません。それが問題だ。

だからあなたが持っているとき

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

パグ（元ジェイド）はそのように解釈します

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

これは無効な HTML です。そのため、Pug はそれを行わず、代わりにエラーを返します。

HTML をどのように表示したいかはわかりませんが、私の例の 2 つの要素は兄弟である必要がありますか? （つまり、同じレベルで）次のように：

.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
于 2016-08-05T19:34:28.447 に答える