Question

我有一个内容充沛的模型，称为Work，其中包含大量数据，其中一个字段是“缩略图”，我成功地成功渲染了所有数据，但缩略图除外。

查询：

{
    allContentfulWork(sort: { fields: publishDate, order: DESC }) {
      edges {
        node {
          thumbnail {
            file {
              url
            }
          }
          title
          slug
          fromDate(formatString: "MMMM Do, YYYY")
          toDate(formatString: "MMMM Do, YYYY")
          publishDate
          gallery {
          file {
            url
          }
        }
      }
    }
  }
}

我的jsx：

<img src={edge.node.thumbnail.file.url} alt={edge.node.title} />

我得到的错误： TypeError：无法读取null的属性“文件”

我想知道如何渲染它，以及如何将gatsby图像与其一起使用。

Answer 1

Contentful内部的“工作”条目之一缺少缩略图。您没有添加它，或者条目没有发布，或者资产被删除了。

通常，您的代码需要处理这种情况，因为即使Contentful警告它们，内容编辑器有时也会删除链接。您应该像这样重构您的JSX：

{edge.node.thumbnail && <img src={edge.node.thumbnail.file.url} alt={edge.node.title} />}

这只会在缩略图存在的情况下呈现img标签。

如何在Gatsby中渲染来自Contentful的照片

1 个答案: