[英]Mapping Gatsby gallery images with GraphQL
I'm trying to figure out how to map gallery images into a lightbox component in Gatsby using graphql query.我试图弄清楚如何使用 graphql 查询将 map 画廊图像放入 Gatsby 中的灯箱组件。 I think I need to set
images = to the childimage sharp array
but I'm not sure how to structure it, keep getting undefined
errors.我想我需要将
images = to the childimage sharp array
,但我不确定如何构造它,不断收到undefined
的错误。 Any pointers would be massively appreciated.任何指针将不胜感激。 Let me know if any more info is required.
让我知道是否需要更多信息。
import React from "react"
import { graphql, Link } from "gatsby"
import Image from "gatsby-image"
import ImageGallery from 'react-image-gallery';
const ComponentName = ({ data }) => {
const {id, galleryImage} = data.home
console.log('data is', data)
const images = [];
return (
<Layout>
<section className="template">
<ImageGallery items={images} />;
</section>
</Layout>
)
}
export const query = graphql`
query GetSingleHome($slug: String) {
home: strapiHomes(slug: { eq: $slug }) {
galleryImage {
formats {
large {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
id
}
}
small {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
id
}
}
}
}
MainImage {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
}
}
`
export default ComponentName
According to the documentation, images
prop
should be an array of images, so applied to your use-case, images
must be an array of object images.根据文档,
images
prop
应该是一个图像数组,因此应用于您的用例, images
必须是一个 object 图像数组。
Assuming that your query is working as expected and retrieving the proper data, you need to mount a valid array of objects to pass as images prop
.假设您的查询按预期工作并检索正确的数据,您需要安装一个有效的对象数组以作为 images
prop
传递。
import React from "react"
import { graphql, Link } from "gatsby"
import Image from "gatsby-image"
import ImageGallery from 'react-image-gallery';
const ComponentName = ({ data }) => {
const {id, galleryImage} = data.home
console.log('data is', data)
const images = [];
galleryImage.forEach(image=>{
let yourImageObject={};
yourImageObject.original=image.formats.large.childImageSharp.fluid;
images.push(yourImageObject);
});
return (
<Layout>
<section className="template">
<ImageGallery items={images} />;
</section>
</Layout>
)
}
export const query = graphql`
query GetSingleHome($slug: String) {
home: strapiHomes(slug: { eq: $slug }) {
galleryImage {
formats {
large {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
id
}
}
small {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
id
}
}
}
}
MainImage {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
}
}
`
export default ComponentName
You can simplify the code but I split to make it more readable and understandable.您可以简化代码,但我将其拆分以使其更具可读性和可理解性。 You need to loop through each image and create the mandatory data for the
ImageGallery
component: an array of objects with an original
property inside with the ...GatsbyImageSharpFluid
fragment inside.您需要遍历每个图像并为
ImageGallery
组件创建必需的数据:内部具有original
属性的对象数组,内部具有...GatsbyImageSharpFluid
片段。
If this package won't work with Gatsby image, you may need to change a little bit as well as the GraphQL query and the code to adapt it.如果此 package 不适用于 Gatsby 图像,您可能需要稍作更改以及 GraphQL 查询和代码以适应它。
I don't know the needs of that dependency but you can also add the thumbnail
property if needed using the same approach, adding:我不知道该依赖项的需求,但如果需要,您也可以使用相同的方法添加
thumbnail
属性,添加:
yourImageObject.thumbnail=image.formats.small.childImageSharp.fluid;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.