IMG-теги в Pug/Jade - ошибка в отношении вложенного содержимого

Я создаю компонент с 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 атрибут, но это не так. Может быть, это отступ, но я тоже возился с этим безуспешно. Есть идеи?

Источник

2 ответа

Элементы изображения не могут иметь другой 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. Так что Мопс не делает этого и вместо этого выдает ошибку.

Я не знаю, как вы хотите, чтобы 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
Источник

Такие теги, как img, meta и link, автоматически закрываются (если вы не используете тип документа XML).

Источник 
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

См. Diff в коде 2-й строки. Pug/Jade делают теги по вашим отступам. тег не имеет пары, и не должен иметь худших полей больше, чем itseltf

Источник
Другие вопросы по тегам