Каков наилучший способ отобразить все изображения каталога в проекте Gatsby с помощью React?
Я использую стартер GatsbyJS https://www.gatsbyjs.org/starters/codebushi/gatsby-starter-forty/, и мне нужно отобразить все изображения из каталога на странице. Рекомендуемый Гэтсби способ импорта мультимедиа — использование инструкции import, но это приводит к тому, что хэши добавляются к именам файлов после сборки. Например:
/static/pic09-d59e4b49832baeb9c62a7a9d6c070f8c.jpg
Если я извлеку все имена файлов из каталога и попытаюсь создать элементы <img> с помощью src = {fileName}, это приведет к пустым изображениям, потому что имена файлов не совпадают с именами на сервере, к которым уже добавлены хэши.
Пожалуйста, порекомендуйте элегантное решение о том, как пройти через это. Мой план резервного копирования состоит в том, чтобы поместить все в каталог static, где хэши не добавляются, но это не рекомендуется документацией Gatsby: https://www.gatsbyjs.org/docs/static-folder/
Это то, что у меня есть сейчас:
import React from 'react'
import Layout from '../components/layout'
class Gallery extends React.Component {
render() {
const images = [];
const req = require.context('../assets/images/signboards', false);
req.keys().forEach(function (key) {
images.push(key.substr(1));
});
return (
<Layout>
<div id = "main">
<section className = "spotlights">
<section>
{images.map((image) => {
return (
<div className = "image">
<img src = {'../assets/images/signboards' + image} alt = "" />
</div>
)
})}
</section>
</section>
</div>
</Layout>
)
}
}
export default Gallery;
Спасибо
Ответы 2
Примечание: этот ответ предполагает, что вы уже установили gatsby-source-filesystem, gatsby-transformer-sharp и gatsby-plugin-sharp.
Вы можете использовать запрос страницы graphql, чтобы получить все файлы определенного расширения в определенной папке путем фильтрации allFile с комбинацией сопоставителей регулярных выражений.
Затем вы можете просмотреть полученные края и использовать gatsby-image для отображения изображения.
import React from "react"
import { graphql } from "gatsby"
import Img from 'gatsby-image'
const IndexPage = ({data}) => (
<>
{data.allFile.edges.map(edge => {
return <Img fluid = {edge.node.childImageSharp.fluid} />
})}
</>
)
export default IndexPage
export const indexQuery = graphql`
query AssetsPhotos {
allFile(filter: {extension: {regex: "/(jpg)|(jpeg)|(png)/"}, dir: {regex: "/assets/images/signboards"}}) {
edges {
node {
id
childImageSharp {
fluid(maxWidth: 300) {
...GatsbyImageSharpFluid
}
}
}
}
}
}
`
Спасибо, это как бы поставило меня на путь. Но как мне передать результат запроса компоненту? Я получаю переменную data как undefined.
data prop содержит результаты запроса страницы GraphQL. Вы можете передать все или некоторые из них любым компонентам.
Привет, чувак, давно ты не отвечал. Я реализовал это так, и теперь, когда мой проект завершен, я обнаружил, что размер моего пакета очень велик из-за рендеринга всех изображений во всех гибких выражениях. Можем ли мы как-то улучшить это, чтобы не раздувать наш окончательный пакет? Просто спрашиваю.
Я думаю, это зависит от фильтра, который вы использовали в своем запросе. Лучше создать новый вопрос.
Вы можете использовать плагин gatsby-source-filesystem. установить плагин:
npm install --save gatsby-source-filesystem
Зарегистрируйте папку или другие фильтры (расширения и т. д.) в файле gatsby.config.js и дайте им имя.
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/src/pages/type1`,
name: 'data',
},
},
Затем создайте такой запрос в компоненте:
{
allFile(filter: { sourceInstanceName: { eq: "data" } }) {
edges {
node {
extension
dir
modifiedTime
}
} }}
У вас может быть много таких «регистраций», предоставляющих разные данные (папка, расширение и т.
Возможный дубликат Запрос всех изображений в папке с использованием GraphQL