盖茨比graphql:过滤特定的单个图像 [英] gatsby & graphql : filtering for a specific single image
问题描述
我不太了解graphql或gatsby,但我相信通过将其放入我的gatsby-config.js中,可以将所有图像加载到graphql中.
I don't really understand graphql or gatsby that well but I believe all my images are loaded into graphql by putting this in my gatsby-config.js
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: path.join(__dirname, `src/assets/images`),
},
},
然后我尝试查询可以使用的特定图像
I am then trying to query a specific image which I can do with
query MyQuery {
allImageSharp(filter: {id: {eq: "7acfccd5-4aef-532b-8889-9d844ae2068b"}}) {
edges {
node {
sizes {
sizes
srcSet
src
aspectRatio
}
id
}
}
}
}
这将返回我想要的内容,但是我必须为此查询输入的ID是 7acfccd5-4aef-532b-8889-9d844ae2068b
.如果将其放在代码中,此ID甚至会保持不变吗?有没有一种方法可以将ID设置为更有意义?
And this returns what I want, but the id that I have to enter for this query is 7acfccd5-4aef-532b-8889-9d844ae2068b
. Is this id even going to stay the same if I put it in my code? Is there a way to set the id to something more sensical?
如果我将查询保存到变量 data
,事实证明 Netlify data.allImageSharp.edges [0]
上为null,而在本地,此值将返回我需要的
If I save my query to a variable data
, it turns out that on Netlify data.allImageSharp.edges[0]
is null, while locally this value will return what I need
我正在寻找查询单个图像的最佳方法.没有多个图像.如果我可以设置自己的ID,则可以查询这些ID.
I'm looking for the best way to query a single image. Not multiple images. If I could set my own id's then I could query these.
更新
我在 gatsby源文件系统文档,但真的不知道如何将其添加到我的代码中
I found an example in the gatsby-source-filesystem documentation, but don't really know how to add it to my code
推荐答案
如果图像的路径为 src/images/exampleImage.jpg
,则可以通过查询来按图像名称查询使用文件而不是 allImageSharp .
If you have an image with a path of src/images/exampleImage.jpg
, you can query by the images name by querying using file rather than allImageSharp.
query HeaderQuery {
exampleImage: file(
extension: {eq: "jpg"},
name: {eq: "exampleImage"}
) {
childImageSharp {
fluid {
src
srcSet
sizes
srcSetWebp
}
}
}
}
您还可以将 {extension:{eq:"jpg"}
替换为 {extension:{regex:"/(jpg)|(jpeg)|(png)/"}}
来查询任何扩展名类型的文件.
You can also replace {extension: {eq: "jpg"}
with {extension: {regex: "/(jpg)|(jpeg)|(png)/"}
to query files of any extension type.
这篇关于盖茨比graphql:过滤特定的单个图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!