如何使用gatsby-image查询多个图像? [英] How do I query multiple images with gatsby-image?
问题描述
我想将16张图像以网格格式渲染到网站上.
I have 16 images that I want to render out onto a website in a grid format.
我为此使用了以下插件:
I'm using the following plugins for this:
-
gatsby-image
-
gatsby-source-filesystem
-
gatsby-plugin-sharp
-
gatsby-transformer-sharp
gatsby-image
gatsby-source-filesystem
gatsby-plugin-sharp
gatsby-transformer-sharp
我阅读了文档,据我所知,它仅演示了如何查询一张图像.
I read the documentation and as for as I know, it only demonstrated how to query for one single image.
例如
import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"
export default ({ data }) => (
<div>
<h1>Hello gatsby-image</h1>
<Img fixed={data.file.childImageSharp.fixed} />
</div>
)
export const query = graphql`
query {
file(relativePath: { eq: "blog/avatars/kyle-mathews.jpeg" }) {
childImageSharp {
# Specify the image processing specifications right in the query.
# Makes it trivial to update as your page's design changes.
fixed(width: 125, height: 125) {
...GatsbyImageSharpFixed
}
}
}
}
`
但是如果我有16张图像,我将如何处理?编写16个独立的查询似乎很麻烦,将来也很难阅读.
But how would I go about this if I had 16 images? Writing 16 separate queries seem rather cumbersome and would be difficult to read in the future.
我在文档中看到了引用多个图像的代码,但是尝试访问图像本身遇到了麻烦.
I saw this code in the docs referencing multiple images, but I have trouble trying to access the images themselves.
例如
export const squareImage = graphql`
fragment squareImage on File {
childImageSharp {
fluid(maxWidth: 200, maxHeight: 200) {
...GatsbyImageSharpFluid
}
}
}
`
export const query = graphql`
query {
image1: file(relativePath: { eq: "images/image1.jpg" }) {
...squareImage
}
image2: file(relativePath: { eq: "images/image2.jpg" }) {
...squareImage
}
image3: file(relativePath: { eq: "images/image3.jpg" }) {
...squareImage
}
}
`
我的文件夹结构如下:
-package.json
---package.json
-src
------图像
---------这16张图片
---------the 16 images
------页面
---------我要在其中渲染16张图像的页面
---------the page where I want to render the 16 images in
等
谢谢.
推荐答案
在GraphiQL中戳一戳可能会帮助您,尤其是Explorer.尽管请记住,盖茨比片段在GraphiQL中不起作用.
Having a poke around in GraphiQL should help you, especially the Explorer. Although remember that Gatsby fragments won't work in GraphiQL.
{
allImageSharp {
edges {
node {
id
fluid(maxWidth: 200, maxHeight: 200) {
...GatsbyImageSharpFluid
}
}
}
}
}
因此,上述内容应与类似以下查询的内容相同,该查询将在GraphiQL中工作
So the above should be equal to something like the following query which will work in GraphiQL
{
allImageSharp {
edges {
node {
id
fluid(maxHeight: 200, maxWidth: 200) {
src
srcSet
base64
aspectRatio
originalImg
sizes
}
}
}
}
}
然后,您的组件可以使用相同的查询并呈现如下结果:
Then your component can use this same query and render the results like this:
import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"
const imgGridStyle = {
display: 'grid',
gridTemplateColumns: `repeat(auto-fill, 200px)`
};
export default ({ data }) => (
<div>
<h1>Hello gatsby-image</h1>
<div style={imgGridStyle}>
{data.allImageSharp.edges.map(edge =>
<Img fluid={edge.node.fluid} />
)}
</div>
</div>
)
export const query = graphql`
query {
allImageSharp {
edges {
node {
id
fluid(maxWidth: 200, maxHeight: 200) {
...GatsbyImageSharpFluid
}
}
}
}
}
`
您可以轻松循环遍历data.allImageSharp.edges.map
中从查询返回的imageSharp节点的结果数组.然后将每个节点的fluid
属性作为fluid
属性传递给gatsby-image
.
You can easily loop over the resulting array of imageSharp nodes returned from the query in data.allImageSharp.edges.map
. Then pass each node's fluid
property, as the fluid
prop to gatsby-image
.
注意:这将呈现项目中的每个 imageSharp节点,这可能是或可能不是您想要实现的.
Note: This renders every imageSharp node in your project, which may or may not be what you want to achieve.
这篇关于如何使用gatsby-image查询多个图像?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!