【GatsbyJS】通过GraphQL在本地文件夹中获取任意图片数据

2 年 ago
清, 扬
1 minute

因为在本地上使用GraphQL获取数据的主题文章很少，所以我把它记下并写成了一篇文章。

所需库

因为使用gatsby-source-filesystem，所以需要安装和配置它。在GraphQL上提供allFile模式。
该库的官方页面。

为了在GraphQL上获取适用于Gatsby优化的图像，我们使用gatsby-transformer-sharp和gatsby-plugin-sharp。

yarn add gatsby-source-filesystem gatsby-transformer-sharp gatsby-plugin-sharp

    ...,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`, //ソース名
        path: `${__dirname}/src/images`, //ファイルの置き場所
      },
    },
    ...

从allFile中提取

可以直接获取本地目录名称，但由于想要接收经过Gatsby转换的静态数据，所以我们会提取childImageSharp模式中的图像。

使用gatsby develop来启动。

// http://localhost:8000/___graphql
{
  allFile {
    edges {
      node {
        childImageSharp {
          fixed {
            src
          }
        }
      }
    }
  }
}

运行此命令将在本地输出图片列表。

使用过滤器来筛选所需的目录。

如果你想要在GraphQL端进行筛选因为有很多图片，你可以设定filter选项。

如果要指定特定的图像的话

在GraphQL上使用`allFile > filter > relativePath > eq`进行指定。

path: `${__dirname}/src/images`

只需指定在gatsby-config.js中指定的目录及其上级目录，即可获取。

{
  allFile(filter: { relativePath: { eq: "food/hogeMeat.png" } }) {
    edges {
      node {
        childImageSharp {
          fixed {
            src
          }
        }
      }
    }
  }
}

如果要指定多个特定图像，则可以使用 allFile > filter > relativePath > in 来进行指定。请以数组形式将路径输入。

{
  allFile(filter: {relativePath: {in: ["foodstuff/fish.png","foodstuff/meat.png"]}}) {
    edges {
      node {
        childImageSharp {
          fixed {
            src
          }
        }
      }
    }
  }
}

若需指定特定目录的情况下

如果想要一次获取整个目录的内容，可以使用 filter 选项并通过 relativeDirectory 进行仅筛选目录的操作。

{
  allFile(filter: {relativeDirectory: {eq: "foodstuff"}}) {
    edges {
      node {
        childImageSharp {
          fixed {
            src
          }
        }
      }
    }
  }
}
bannerAds