IMG-Tags in Pug/Jade - Fehler re: verschachtelt Inhalt

Question

Ich baue eine Komponente mit Pug und immer wieder einen Fehler mit einem Element img. Hier ist der relevante Code (die CSS-Klassen sind Tachyonen):

.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 

Wenn ich versuche, dies zu kompilieren, bekomme ich folgende Fehlermeldung:

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. 

ich das nicht herausfinden kann. Ich dachte, vielleicht gab es ein Problem mit der SVG, aber das ist es nicht. Ich dachte, dass es vielleicht ein alt Attribut erfordert, aber das ist es nicht. Vielleicht ist es die Einrückung, aber ich habe auch damit herumgespielt, ohne Glück. Irgendwelche Ideen?

Answer 1

Bildelemente können keinen anderen HTML-Code enthalten. Das ist das Problem. So

wenn Sie

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

Mops (ehemalige Jade) wird das interpretieren wie

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

und das ist ungültig HTML. Pug tut das nicht und gibt stattdessen einen Fehler.

Ich weiß nicht, wie Sie möchten, dass das HTML aussieht, aber vielleicht sollten diese beiden Elemente in meinem Beispiel Geschwister sein? (Dh in der gleichen Ebene) wie folgt aus:

.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 

Answer 2

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

..

ist falsch. Tun Sie dies:

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

diff Siehe in 2st Linie Code Mops/Jade-Tags durch Ihre Einzüge machen. Tag hat kein Paar, und sollte nicht minderwertige Ränder mehr sein als itselft