如何解决我无法在 gatsby-plugin-image 上传递道具
我想从 gatsby-image 迁移到 gatsby-plugin-image。道具有问题。
(已经从 gatsby-plugin-image 查询)
query MyQuery {
shopifyProduct(
shopifyId: {eq: $shopifyId}
) {
title
description
images {
localFile {
childImageSharp {
gatsbyImageData(layout: CONSTRAINED,placeholder: BLURRED,formats: WEBP)
}
}
}
}
}
部分模板代码(传递道具):
<div>
<Imagegallery images={props.data.shopifyProduct.images} />
</div>
Gatsby-image:(Imagegallery 组件)
我正在使用 Gatsby-image 插件。我想迁移到 gatsby-plugin-image。
使用 gatsby-plugin-image 在组件之间传递 props 变得越来越复杂。
解决方法
您只需要:
import { GatsbyImage } from "gatsby-plugin-image"
const ImageGallery = ({ images }) => {
return (
<div>
<GatsbyImage image={images[0].localFile.childImageSharp.gatsbyImageData} alt=""/>
</div>
)
}
使用新的 gatsby-plugin-image
,您不再需要调用固定或流体图像,信息存储在 gatsbyImageData
中,之前在 GraphQL 查询中进行了查询和过滤。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。