[英]Gatsby / Graphql - Can't display img from query
Below is my code:下面是我的代码:
import React from 'react'
import { graphql, useStaticQuery } from "gatsby"
import Img from 'gatsby-image'
const ImageGallery = () => {
const data = useStaticQuery(graphql`
query {
images: allFile(filter: { sourceInstanceName: {eq: "images" }}) {
edges {
node {
relativePath
childImageSharp {
id
fluid {
originalImg
}
}
}
}
}
}
`)
// Filters all the images from "gallery-one"
const galleryImages = data.images.edges.filter(edge =>
edge.node.relativePath.startsWith("gallery-one")
)
console.log(data)
console.log(galleryImages)
return (
<div>
<h1>Gallery One</h1>
{
// Mapping over galleryImages array to display each image
galleryImages.map((image) =>
<div>
// Returns relative path for each image
{image.node.childImageSharp.fluid.originalImg}
// Returns nothing
<Img fluid={image.node.childImageSharp.fluid.originalImg} />
</div>
)
}
</div>
)
}
export default ImageGallery
With the first part in the map, it returns:对于 map 中的第一部分,它返回:
/static/3608211e3ce3f78486c9e344b92332d9/5f7bf/20171107_155145.jpg
/static/3608211e3ce3f78486c9e344b92332d9/5f7bf/20171107_155145.jpg
/static/fccd9cdb1c9b525bfaf9282343d680a6/5f7bf/20171101_103124.jpg
/static/fccd9cdb1c9b525bfaf9282343d680a6/5f7bf/20171101_103124.jpg
/static/cdcbaebc030e210debc70bdff7a8d539/5f7bf/20171107_155126.jpg
/静态/cdcbaebc030e210debc70bdff7a8d539/5f7bf/20171107_155126.jpg
/static/ef8708d7f536bd152c9ce98833d6d871/5f7bf/20171101_103218.jpg
/static/ef8708d7f536bd152c9ce98833d6d871/5f7bf/20171101_103218.jpg
/static/1c3b4e40cb5044e604009935b625fa38/5f7bf/20171101_103138.jpg
/static/1c3b4e40cb5044e604009935b625fa38/5f7bf/20171101_103138.jpg
One for each image in the 'gallery-one' folder, but I cannot figure out how to get it to display using Gatsby Img. “gallery-one”文件夹中的每个图像一个,但我不知道如何使用 Gatsby Img 显示它。
I feel like this is really close, but I can't seem to figure it out我觉得这真的很接近,但我似乎无法弄清楚
fluid={image.node.childImageSharp.fluid.originalImg}
Yes, you're almost there.是的,你快到了。
When you query an image to be displayed using gatsby-image
you have 2 options:当您使用
gatsby-image
查询要显示的图像时,您有 2 个选项:
Use a GraphQL fragment:使用 GraphQL 片段:
Instead of using originalImg
you should use ...GatsbyImageSharpFluid
which will provide to the fluid
object all information required.而不是使用
originalImg
您应该使用...GatsbyImageSharpFluid
它将为fluid
object 提供所需的所有信息。
Querying all the data required.查询所有需要的数据。 In this case you should use:
在这种情况下,您应该使用:
fluid (maxWidth: 800) { aspectRatio src srcSet sizes originalImg originalName }
Disclaimer: the default maxWidth
is 800px
.免责声明:默认
maxWidth
为800px
。 If you don't set it, it will take the default value.如果不设置,它将采用默认值。
Once you gathered all the information, it needs to be passed to <Img>
removing your originalImg
, such as:收集完所有信息后,需要将其传递给
<Img>
删除您的originalImg
,例如:
fluid={image.node.childImageSharp.fluid}
For further information check Gatsby Image API documentation .有关详细信息,请查看Gatsby Image API 文档。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.