在 Gatsby 中迭代包括图像在内的数据

如何解决在 Gatsby 中迭代包括图像在内的数据

在 Gatsby 中，我想遍历一个包含对象的数组。每个对象的属性之一是图像。我希望能够使用 Gatsby Image。

以下是我想要这样做的一个示例：网站上的一个带有图片库的页面，点击每个图片都会打开一个特定的关联视频。也许我想要数组中有 20、50 甚至 100 多个对象：

const videos = [
  {
    id: 1,name: 'Festival 2018',url: 'https://www.youtube.com',img: // HOW TO ACHIEVE?
  },// Many more objects
]

videos.map((item) => {
  return (
    <Img
      key={item.id}
      fluid= // HOW TO ACHIEVE?
      alt={item.name}
      onClick={() => openPlayer(item.url)}
    />
  )
})

我了解如何使用 GraphQL 查询单个图像；或如何查询多个图像并使用别名；或如何查询文件夹中的所有图像。但我还没有想出如何实现我的目标。可能有更好的方法。提前致谢。

解决方法

要在 gatsby-image 中使用内部图像，您需要使用 gatsby-source-filesystem 允许 Gatsby 及其变换器和锐器知道图像的位置。这将从您的图像创建可查询的节点，并允许您将 gatsby-image 与它们一起使用。

适用于您的情况，您需要将所有图像放在同一个文件夹中，例如 /src/images 和：

const path = require(`path`)

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,options: {
        name: `images`,path: path.join(__dirname,`src`,`images`),},`gatsby-plugin-sharp`,`gatsby-transformer-sharp`,],}

在那里，您的 JSON 对象将如下所示：

const videos = [
  {
    id: 1,name: 'Festival 2018',url: 'https://www.youtube.com',img: '/relative/path/to/your/image.extension',extension: 'png'
  },// Many more objects
]

注意：感谢 John 对 extension 字段的澄清。资料来源：https://stackoverflow.com/a/56012718/13714522

就您而言，由于您使用的是基于 JSON 的源，因此您需要添加 gatsby-transformer-plugin。配置将如下所示：

module.exports = {
  plugins: [
    `gatsby-transformer-json`,{
      resolve: `gatsby-source-filesystem`,options: {
        path: `./src/data/`,}

注意：假设 JSON 放在 /src/data

还假设您的 JSON 文件名为 data.json，如果一切设置正确，Gatsby 将创建一个名为 allDataJson 的 GraphQL 节点。然后你只需要创建一个查询（页面查询或静态查询），内容如下：

{
  allDataJson {
    edges {
      node {
        name
        url
        id
        img {
          childImageSharp {
            fluid(maxWidth: 1000,quality: 100) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
}

注意：在 localhost:8000/___graphql 游乐场中检查您的确切查询

如果您的路径正确，Gatsby 将创建 childImageSharp 节点，该节点将允许您在 gatsby-image 功能中使用自己的内部图像。由于您查询的数据存储在 props.data 中，因此您的最终循环应如下所示：

props.data.allDataJson.edges.node.map((item) => {
  return (
    <Img
      key={item.id}
      fluid={item.img.childImageSharp.fluid}
      alt={item.name}
      onClick={() => openPlayer(item.url)}
    />
  )
})