Reactjs 我应该如何导入盖茨比文件夹下的所有图像

我刚接触gatsby.js，正在做一些gatsby初学者。对，我有一个文件夹结构，里面有

index.md

和一张特色图片。我导入此图片的方式是通过此查询

jobs: allMarkdownRemark(
filter: { fileAbsolutePath: { regex: "/jobs/" } }
sort: { fields: [frontmatter\_\_\_date], order: DESC }
) {
edges {
node {
frontmatter {
title
company
location
range
url
name
pic {
childImageSharp {
fluid(maxWidth: 1000, quality: 90) {
...GatsbyImageSharpFluid\_withWebp
}
}
}
}
html
}
}
}

这样我就可以获得/jobs/path下每个job文件夹的所有帖子。在

src/content/jobs/job1/index.md

中，它有一个条目

pic:'./pic.jpg'

。这是非常有限的，因为如果我想在这篇文章中包含更多的图片，我需要在

index.md

中创建一个

pic2:'./pic2.jpg'

条目，同时修改查询以使其正确

```
jobs: allMarkdownRemark(
filter: { fileAbsolutePath: { regex: "/jobs/" } }
sort: { fields: [frontmatter\_\_\_date], order: DESC }
) {
edges {
node {
frontmatter {
title
company
location
range
url
name
pic {
childImageSharp {
fluid(maxWidth: 1000, quality: 90) {
...GatsbyImageSharpFluid\_withWebp
}
}
pic2 {  <----- new query for the newly added picture
childImageSharp {
fluid(maxWidth: 1000, quality: 90) {
...GatsbyImageSharpFluid\_withWebp
}
}
}
}
html
}
}
}
```

---

但在我的例子中，我有

src/content/jobs/job1

，

src/content/jobs/job2

，

src/content/jobs/job3

甚至可能是

src/content/jobs/job4\

，我可以在以后添加它。此解决方案仅适用于一个特定文件夹。

以下是一个类，用于从图像文件夹中获取所有图像：

import React from "react";
import { graphql, useStaticQuery } from "gatsby";
import GatsbyImage from "gatsby-image";

/**
 * Uses GatsbyImage and GraphQL to return all images.
 * @see https://www.orangejellyfish.com/blog/a-comprehensive-guide-to-images-in-gatsby/
 */
const ImageSupplier = () => {

  // Don't forget to set the size of your image in
  // fluid(maxWidth: 300, quality: 100) {
  const { allFile } = useStaticQuery(graphql`
    query {
      allFile(filter: {
        extension: {regex: "/(jpg)|(jpeg)|(png)/"}, 
        sourceInstanceName: {eq: "imageFolder"}}) 
      {
        edges {
          node {
            childImageSharp {
              fluid(maxWidth: 300, quality: 100) {
              originalName
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }`);

  return ( allFile.edges );
};

export default ImageSupplier;

您必须在gatsby-config.js中定义源实例：

{
  resolve: "gatsby-source-filesystem",
  options: {
    path: `${__dirname}/src/components/image-folder`,
    name: "imageFolder",
  },
},

allFile.edges

包含文件夹中的所有图像。使用map函数获取所有图像。这样您就不必手动导入

您可以在浏览器中测试查询是否在GraphiQL中工作：

http://localhost:8000/___graphql

query {
  allFile(filter: {
    extension: {regex: "/(jpg)|(jpeg)|(png)/"}, 
    sourceInstanceName: {eq: "imageFolder"}}) 
  {
    edges {
      node {
        childImageSharp {
          fluid(maxWidth: 280, quality: 100) {
          originalName
          }
        }
      }
    }
  }
}

---

这应该会显示所有的图像。如果没有，则说明配置不正确

下面是一个类，用于从图像文件夹中获取所有图像：

import React from "react";
import { graphql, useStaticQuery } from "gatsby";
import GatsbyImage from "gatsby-image";

/**
 * Uses GatsbyImage and GraphQL to return all images.
 * @see https://www.orangejellyfish.com/blog/a-comprehensive-guide-to-images-in-gatsby/
 */
const ImageSupplier = () => {

  // Don't forget to set the size of your image in
  // fluid(maxWidth: 300, quality: 100) {
  const { allFile } = useStaticQuery(graphql`
    query {
      allFile(filter: {
        extension: {regex: "/(jpg)|(jpeg)|(png)/"}, 
        sourceInstanceName: {eq: "imageFolder"}}) 
      {
        edges {
          node {
            childImageSharp {
              fluid(maxWidth: 300, quality: 100) {
              originalName
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }`);

  return ( allFile.edges );
};

export default ImageSupplier;

您必须在gatsby-config.js中定义源实例：

{
  resolve: "gatsby-source-filesystem",
  options: {
    path: `${__dirname}/src/components/image-folder`,
    name: "imageFolder",
  },
},

allFile.edges

包含文件夹中的所有图像。使用map函数获取所有图像。这样您就不必手动导入

您可以在浏览器中测试查询是否在GraphiQL中工作：

http://localhost:8000/___graphql

query {
  allFile(filter: {
    extension: {regex: "/(jpg)|(jpeg)|(png)/"}, 
    sourceInstanceName: {eq: "imageFolder"}}) 
  {
    edges {
      node {
        childImageSharp {
          fluid(maxWidth: 280, quality: 100) {
          originalName
          }
        }
      }
    }
  }
}

---

这应该会显示所有的图像。如果没有，则说明配置不正确

嗨。谢谢你的回复。然而，这似乎不起作用。我想我需要在

src/components/

下有一个名为

image folder

的文件夹来保存图像文件，这样才能正常工作。所以我这样做了，但是

ImageSupplier

返回了一个空数组。你把图像文件放进去了吗？在浏览器中使用GraphiQL确保查询正常。是的，我在

src/components/image文件夹下有一些图像。另外，我假设这个函数只读取一个预定义文件夹中的所有图像，如果我需要从不同的文件夹中读取，该怎么办？@Joji我在回答的最后添加了如何在浏览器中测试图像。如果要从多个文件夹中获取图像，必须在
gatsby config.js
中指定每个文件夹。在查询中，必须指定每个文件夹的
sourceInstanceName
。当答案有效时，别忘了接受并投票表决您好，您的解决方案有效，我已将其升级。但遗憾的是，这不适合我的情况。我编辑了我的问题来解释原因。谢谢你的回复。然而，这似乎不起作用。我想我需要在
src/components/
下有一个名为
image folder
的文件夹来保存图像文件，这样才能正常工作。所以我这样做了，但是
ImageSupplier
返回了一个空数组。你把图像文件放进去了吗？在浏览器中使用GraphiQL确保查询正常。是的，我在
src/components/image文件夹下有一些图像。另外，我假设这个函数只读取一个预定义文件夹中的所有图像，如果我需要从不同的文件夹中读取，该怎么办？@Joji我在回答的最后添加了如何在浏览器中测试图像。如果要从多个文件夹中获取图像，必须在
gatsby config.js
中指定每个文件夹。在查询中，必须指定每个文件夹的
sourceInstanceName
。当答案有效时，别忘了接受并投票表决您好，您的解决方案有效，我已将其升级。但遗憾的是，这不适合我的情况。我编辑了我的问题来解释原因。