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

Question

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

下面是我想要这样做的一个例子：网站上的一个页面有一个图片库，点击每个图片都会打开一个特定的关联视频。也许我想要数组中的 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 查询单张图片；或者如何查询多个图像并使用别名；或者如何查询文件夹中的所有图像。但我还没有想出如何实现我的目标。可能有更好的方法。提前致谢。

Answer 1

要在 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 for the clarification about the extension field. Source:

在您的情况下，由于您使用的是基于 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 playground

中检查您的确切查询

如果您的路径正确，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)}
    />
  )
})

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

iterating over data including image in Gatsby

javascript

graphql

gatsby

gatsby-image