1

I'm building a component with Pug and keep getting an error with an img element. Here's the relevant code (the CSS classes are 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

When I try to compile this, I get the following error: 

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.

I can't figure this out. I thought maybe there was a problem with the svg, but that's not it. I thought maybe it was demanding an alt attribute, but that's not it. Maybe it's the indentation, but I also fiddled with that with no luck. Any ideas?

1
  • 2
    AFAIK, you can't have content nested inside an <img> tag, which is the error you're getting. Maybe you just need to unindent the lines after img by one level?
    – Shakeel
    Commented Jun 20, 2016 at 7:55

2 Answers 2

Reset to default
4

Image elements cannot have other HTML inside it. That is the problem.

So when you have 

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

Pug (former Jade) will interpret that like

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

and that is invalid HTML. So Pug does not do that and gives you a error instead.

I don't know how you want the HTML to look like but maybe those two elements in my example should be siblings? (ie in the same level) like this:

.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
0 
img.db.w-100.br2.br--top(src='assets/img/img.svg')
  .pa2.ph3-ns.pb3-ns
     .dt.w-100.mt1

..

is incorrect. Do this:

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

See diff in 2st line code Pug/Jade make tags by your indents. tag does not have a pair, and should not be inferior margins more than itseltf