资产库到 GatsbyImage (Gatsby v3+)

Question

我的 DatoCMS 中有一个资产库（仅图像），并希望通过 GatsbyImage 显示它们（来自新的 gatsby-plugin-image）。但是，由于我的博文中有几张图片，而且它们的数量并不总是相同，我需要编写一个循环（我猜？）但不知道该怎么做。

我的帖子组件：

export default function ProjectContent(props) {
    return (
        <div className="projectContent">
            <div className="projectContent__assets">
                <GatsbyImage image={props.imageGallery} />
            </div>
        </div>
    )
}

和项目模板组件：

export default function Project({ data }) {
    return (
        <>
            <ProjectContent 
                imageGallery={data.datoCmsProject.photos.gatsbyImageData}
            />
        </>
    )
}

    export const query = graphql`
    query($slug: String!)
      {
        datoCmsProject(slug: { eq: $slug }) {
          photos {
              gatsbyImageData(placeholder: BLURRED, layout: CONSTRAINED)
          }
        }
    }`

目前，没有显示图像。我已经设法让 GatsbyImage + DatoCMS 能够处理单个图像，但不能处理资产库。

感谢您的帮助！

Answer 1

我认为正在尝试做的事情：

export default function Project({ data }) {

return (
    <>
        <ProjectContent 
            imageGallery={data.datoCmsProject.photos}
        />
    </>
 )
}

export const query = graphql`
query($slug: String!)
  {
    datoCmsProject(slug: { eq: $slug }) {
      photos {
          gatsbyImageData(placeholder: BLURRED, layout: CONSTRAINED)
      }
    }
}`

请注意，您将photos (data.datoCmsProject.photos) 的完整数组发送到子组件。

在子组件中：

export default function ProjectContent(props) {
    return (
        <div className="projectContent">
            <div className="projectContent__assets">
                {props.imageGallery.map(photo=>{
                   return <GatsbyImage image={photo.gatsbyImageData} />
               })}
            </div>
        </div>
    )
}

这是不言自明的，但在您的情况下，photos（作为imageGallery 发送到子组件）是一组图像。一旦你得到它（props.imageGallery），你只需要循环它们，如你所说，并使用新的<GatsbyImage> 组件打印它们。 photo（可迭代变量）的每个实例都需要 gatsbyImageData。