Получить все изображения из определенного каталога через GraphQL и Gatsby JS
У меня есть три папки с изображениями, которые будут загружены в несколько компонентов карусели. Вот структура папок, я бы получил все изображения, которые находятся в папках 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)?
Ответы 1
Пара вещей бросается мне в глаза, хотя я не уверен, решает ли это проблему:
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
}
}
}
`;
Я не лучший специалист с регулярными выражениями, но эти запросы к регулярным выражениям, по сути, означают: «дайте мне любой файл после коллекции #».
@ jkjmr6 - Я отредактировал регулярное выражение, чтобы найти больше файлов, попробуйте. Я думаю, вам просто нужно немного подправить регулярные выражения, и все почти готово.
Спасибо за ответ @staypuftman. Я обновил запрос, но он возвращает только одно изображение вместо 3 или 4 изображений, которые находятся в папке.