如何使用 GatsbyJS 和 GraphQL 查询和显示包含多个图像的文件夹

Posted 2023-03-06

【中文标题】如何使用 GatsbyJS 和 GraphQL 查询和显示包含多个图像的文件夹

【英文标题】：How do you query and display a folder of multiple images using GatsbyJS and GraphQL

【发布时间】：2020-03-14 08:18:26

【问题描述】：

我正在尝试查询文件夹中的所有图像，并将它们显示在带有 tailwindCSS 和 gatsby-image 的卡片网格中。我已经能够查询和显示一个图像，但是当我尝试使用图像文件夹执行此操作时，即使查询在 GraphQL 资源管理器中有效，我也会收到错误“TypeError: Cannot read property 'edges' of undefined” .我已经阅读了文档，查看了其他教程，并且现在尝试了很多不同的方法，但无法弄清楚出了什么问题。任何帮助是极大的赞赏！

import React from "react";
import  graphql  from "gatsby";
import Img from "gatsby-image";
import Layout from "../components/layout";
import SEO from "../components/seo";

const ArtPage = props => (
    <Layout>
      <SEO
        keywords=[`art`, `paint`, `draw`]
        title="Art"
      />
      <div class="flex flex-wrap mt-2 mx-1">
        props.artImages.edges.map(img => (
          <div class="w-full md:w-1/2 lg:w-1/2 px-2 my-2">
            <div className="rounded overflow-hidden shadow-lg">
              <Img
                className="w-full"
                fluid=img.node.childImageSharp.fluid
              />
            </div>
          </div>
        ))
      </div> 
    </Layout>
)

export default ArtPage;

export const query = graphql`
  query artImages 
    allFile(filter:  relativePath:  regex: "/art/.*.png/"   ) 
    
      edges 
        node 
          relativePath
          name
          childImageSharp 
            fluid(maxWidth: 500) 
              ...GatsbyImageSharpFluid
            
          
        
      
     
  
`;

【参考方案1】：

我使用的是 props.artImages 而不是 props.data.artImages oooooooops

【参考方案2】：

调试这样的问题总是很困难的。由于您声明您的查询在 GraphiQL 中是正确的，因此您可能在引用 GraphQL 树中的正确属性时犯了错误。 undefined 表示您引用了一个不存在的对象。

调试这个问题的秘密武器其实是console.log(graphQlobject)。在浏览器中打印对象并尝试访问属性，直到正确为止。

我会给你我在项目中使用的 HeaderSupplier 组件，并用 cmets 引用重要的部分：

import React from "react";
import  graphql, useStaticQuery  from "gatsby";
import GatsbyImage from "gatsby-image";
import styled from "styled-components";
import  pickRandomly  from "../util/utilityFunctions";

/**
 * Returns one random image header.
 * Uses GatsbyImage and GraphQL to load images.
 * @see https://www.orangejellyfish.com/blog/a-comprehensive-guide-to-images-in-gatsby/
 */
const HeaderSupplier = () => 
  const  allFile  = useStaticQuery(graphql`
    query 
      allFile(filter: 
        extension: regex: "/(jpg)|(jpeg)|(png)/", 
        sourceInstanceName: eq: "headers") 
        // filter by sourceInstanceName, see the gatsby-config.js, 
        // this way you get exactly the files you need without complicated regex statements
      
        edges 
          node 
            childImageSharp 
              fluid(maxWidth: 150, quality: 100) 
                originalName
                ...GatsbyImageSharpFluid
              
            
          
        
      
    `);

  // use console.log for debugging and correctly navigating the graphQL tree
  console.log(allFile);

  const header = pickRandomly(allFile.edges); 
  const  fluid  = header.node.childImageSharp;
  // make sure you reference the correct objects
  // if you get undefined you made a mistake navigating the GraphQL tree

  return (
      <GatsbyImage fluid=fluid alt=fluid.originalName />
  );
;

export default HeaderSupplier;

gatsby-config.js中的源实例：

      resolve: "gatsby-source-filesystem",
      options: 
        path: `$__dirname/src/components/library/headers`,
        name: "headers",
      ,