如何在盖茨比中渲染来自内容的照片

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} />

我得到的错误：类型错误： 无法读取 null 的属性"文件">

我想知道如何渲染它以及如何使用它的盖茨比图像。

Answer 1

您在 Contentful 中的某个"工作"条目缺少缩略图。 您没有添加它，或者条目未发布，或者资产已删除。

通常，您的

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

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

仅当缩略图存在时，此操作才会呈现img标记。