如何使用Gatsby展示Contentful中的单张图片

嘿，我来帮你解决用gatsby-image展示Contentful单张图片的问题！

第一步：调整你的GraphQL查询 #

你当前的查询只获取了图片的原始URL和文件名，但gatsby-image需要Gatsby处理后的图片数据（比如fluid或resolutions）来实现响应式加载和优化。所以要修改查询，加入这些必要的字段：

query {
  contentfulAsset(title: {eq: "kevin"}) {
    file {
      url
      fileName
    }
    # 根据需求选fluid（适合响应式布局）或resolutions（固定尺寸）
    fluid(maxWidth: 800) {
      ...GatsbyContentfulFluid
    }
  }
}

提示：如果需要固定尺寸的图片，把fluid换成resolutions，并使用...GatsbyContentfulResolutions片段。

第二步：在组件中渲染单张图片 #

因为你查询的是单个asset对象（不是数组），所以不需要像官方示例那样用[0]去取数组元素，直接使用查询返回的data.contentfulAsset即可。示例组件代码：

import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"

const KevinImage = ({ data }) => {
  const kevinImage = data.contentfulAsset
  
  // 先判断图片数据是否存在，避免报错
  if (!kevinImage?.fluid) {
    return <div>无法加载图片</div>
  }

  return (
    <Img
      fluid={kevinImage.fluid}
      alt={kevinImage.file.fileName} // 这里可以替换成更友好的描述文本
      style={{ margin: 0 }}
    />
  )
}

export const query = graphql`
  query {
    contentfulAsset(title: {eq: "kevin"}) {
      file {
        url
        fileName
      }
      fluid(maxWidth: 800) {
        ...GatsbyContentfulFluid
      }
    }
  }
`

export default KevinImage

为什么官方示例用了[0]？ #

官方示例里的node.image[0]是因为那个场景下的image字段是Contentful中的多图类型（返回数组），而你的情况是直接查询单个asset条目，所以返回的是单个对象，不需要数组索引。

内容的提问来源于stack exchange，提问作者Kévin Furet