如何解决资产库到 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
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。