Question

我正在调用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)

您看到的最后一行是错误的，但是我无法找到任何有关此的资源。有什么建议吗？

Answer 1

您需要将img放在td下缩进的新行中，以使其成为自己的标签：

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

使用PUG将图像插入表格单元格

1 个答案: