资产库到 GatsbyImage (Gatsby v3+)

问题描述

我的 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 可以处理单个图像，但不能处理资产库。

感谢所有帮助！

解决方法

我认为正在尝试：

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。

gatsby gatsby-image