我有三个文件夹,这些文件夹将加载到多个轮播组件中。这是文件夹结构,我会得到collection
文件夹中的所有图像。
src/
images/
collection1/
collection2/
collection3/
randomImage.jpg
randomImage.svg
components/
pages/
我目前有这个查询:
export const pageQuery = graphql`
query IndexQuery {
site {
siteMetadata {
title
}
}
heroFeaturedImage: imageSharp(id: { regex: "/war-room.jpg/" }) {
sizes(maxWidth: 1250, quality: 90) {
...GatsbyImageSharpSizes
}
}
allImageSharp {
edges {
node {
... on ImageSharp {
sizes(maxWidth: 1250, quality: 90) {
src
srcSet
originalName
}
}
}
}
}
}
`;
这是我的 gatsby-config.js :
module.exports = {
siteMetadata: {
title: 'Get all images in directory test',
},
plugins: [
'gatsby-plugin-react-helmet',
'gatsby-plugin-styled-components',
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/src/pages`,
name: 'pages',
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/src/images`,
name: 'images',
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `collection1`,
path: `${__dirname}/src/images/collection1`,
},
},
{
resolve: `gatsby-plugin-google-fonts`,
options: {
fonts: [`Roboto\:300,400,500,600`, `Montserrat\:300,400,600,800`],
},
},
],
};
它的问题是返回项目中的所有图像,而没有很好的方式来组织我想要的特定图像。
那么我怎样才能从特定目录中获取所有图像(例如collection1
)?
答案 0 :(得分:0)
虽然我不确定这是否能解决问题,但我还是会对我产生影响:
1)gatsby-config.js
有点奇怪,你在相同的图像集上调用了gatsby-source-filesystem
两次。我认为你可能会失去对collection1
集的调用,这是我所理解的冗余。
2)allImageSharp
查询看起来正在做它应该做的事情,返回所有内容。您是否尝试过如下查询:
export const pageQuery = graphql`
query IndexQuery {
site {
siteMetadata {
title
}
}
collectionOneImages: imageSharp(id: { regex: "^\/collection1\/?(?:[^\/]+\/?)*$" }) {
sizes(maxWidth: 1250, quality: 90) {
...GatsbyImageSharpSizes
}
}
collectionTwoImages: imageSharp(id: { regex: "^\/collection2\/?(?:[^\/]+\/?)*$" }) {
sizes(maxWidth: 1250, quality: 90) {
...GatsbyImageSharpSizes
}
}
collectionThreeImages: imageSharp(id: { regex: "^\/collection3\/?(?:[^\/]+\/?)*$" }) {
sizes(maxWidth: 1250, quality: 90) {
...GatsbyImageSharpSizes
}
}
}
`;
我不是最好的正则表达式,但那些正则表达式查询本质上意味着,"在收集#"之后给我任何文件。