Question

使用 gatsby-image 映射图像

2020-02-09

954

javascript reactjs gatsby gatsby-image

尝试映射 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>

Answer 1

您的 graphQL 查询中的过滤器可能是问题所在。您是否在浏览器中尝试使用 graphiQL 进行查询？

由于您在 gatsby-config.js 中定义了 images ，因此我建议使用 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;
  // ...