资产库到 GatsbyImage (Gatsby v3+)

Question

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

我的post组件：

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。

资产库到 GatsbyImage (Gatsby v3+)

Asset Gallery to GatsbyImage (Gatsby v3+)

gatsby

gatsby-image