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?
<img>
tag, which is the error you're getting. Maybe you just need to unindent the lines afterimg
by one level?