отображение картинок с помощью gatsby-image - PullRequest
Новая
       7

отображение картинок с помощью gatsby-image

1 голос
/ 09 февраля 2020

пытается отобразить изображения из папки в проекте gatsby. Я настроил запрос так, как я думал, будет работать на основе руководств, которые я видел. Я не получаю никаких ошибок и сайт загружается, но изображения не отображаются. Какие-нибудь мысли? Спасибо!

gatsby-config. js: 

  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },

запрос: 

    const data = useStaticQuery(graphql`
      query {
        allFile(filter:{extension:{regex:"/social/"}}) {
          edges {
            node {
              childImageSharp {
                fixed(width: 150, height: 150) {
                    ...GatsbyImageSharpFixed
                }
              }
            }
          }
        }
      }

    `)

возврат: 

            <div className='socialPhotos'>
                {data.allFile.edges.map(node => 
                    <Img 
                      key={node.id}
                      title="Photo image"
                      alt="Photo"
                      fixed={node.childImageSharp.fixed}
                    />
                    )}
            </div>

1 Ответ

2 голосов
/ 10 февраля 2020

Фильтр в вашем запросе graphQL может быть проблемой. Вы пробовали свой запрос в GraphiQL в браузере?

Поскольку вы определяете images в своем gatsby-config.js, я бы предложил фильтрацию с помощью sourceInstanceName: 

    const data = useStaticQuery(graphql`
      query {
      allFile(filter: {sourceInstanceName: {eq: "images"}}) {
          edges {
            node {
              childImageSharp {
                fixed(width: 150, height: 150) {
                    ...GatsbyImageSharpFixed
                }
              }
            }
          }
        }
      }
    `)

Вставьте запрос в GraphiQL в своем браузере и проверьте, получаете ли вы данные назад: http://localhost:8000/___graphql

РЕДАКТИРОВАТЬ

Вот как вы можете получить одно изображение из вашего запроса внутри вашего компонента 

const YourComponent = (props) => {
  const { data: { allFile: { edges } } } = props;
  const oneImage = edges.filter(
    el => el.node.childImageSharp.fixed.originalName === "yourImageFileName.png")
    [0].node.childImageSharp.fixed;
  // ...
...