Вставка изображения в ячейку таблицы с помощью PUG - PullRequest
Новая
       27

Вставка изображения в ячейку таблицы с помощью PUG

0 голосов
/ 10 октября 2018

Я звоню в API и использую PUG для отображения результатов.Одним из свойств является ссылка на изображение, и я хочу, чтобы изображение отображалось в последнем столбце (возможно, установите адаптивный рост и вес, чтобы большое изображение не занимало всю страницу).

Я передаюмассив объектов и ссылка на изображение находятся здесь: item.result.image.contentUrl

html 

  head
    title= Results
    link(rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous")
    body
      table(class="table table-striped")
        thead(class="thead-dark")
          tr
            th(scope="col") Result for #{searchTerm}
            th(scope="col") Description
            th(scope="col") Image
        tbody
            each item in searchData
                tr
                    td(scope="row")= item.result.name
                    td(scope="row")= item.result.description
                    if !item.result.image
                      td(scope="row") Image not found
                    else
                      td(scope="row") img(src= item.result.image.contentUrl)

Последняя строка, как вы можете видеть, неверна, но я не смог найтилюбые ресурсы по этому вопросу.Есть предложения?

1 Ответ

0 голосов
/ 10 октября 2018

Вам нужно поместить img в новую строку с отступом под тд, чтобы он был его собственным тегом: 

td(scope="row")
  img(src= item.result.image.contentUrl)

Пока мы это делаем, я бы рекомендовал вам перевернутьваше условное окружение будет легче читать: 

if item.result.image
  td(scope="row")
    img(src= item.result.image.contentUrl)
else
  td(scope="row") Image not found

или даже лучше: 

td(scope="row")
  if item.result.image
    img(src= item.result.image.contentUrl)
  else
    div Image not found
...