用 gatsby-image 映射图像

Question

尝试从 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;
  // ...