Question

我有以下组件。对于图像，我想使用gatsby-image和美术指导的多个图像。 gatsby-image的示例适用于单个图像，但是如何将其应用于具有多个图像的组件？

子组件：

const Cards = ({ className, items }) => {
  return (
    <section className={className}>
      <div className="grid">
        {items.map(item => {
          return (
            <div className="card">
              <img src={item.image} alt="" />
              <h3>{item.title}</h3>
              <p>{item.desc}</p>
            </div>
          )
        })}
      </div>
    </section>
  )
}

export default Cards

页面组件：

const IndexPage = () => (
  <Layout>
    <Cards items={cards} />
  </Layout>
)

const cards = [
  {
    title: 'Card One',
    desc: 'Description',
    image: require('../images/image.jpg'),
  },
  {
    title: 'Card Two',
    desc: 'Description',
    image: require('../images/image2.jpg'),
  },
  {
    title: 'Card Three',
    desc: 'Description',
    image: require('../images/image3.jpg'),
  },
]

export default IndexPage

来自gatsby-image文档的示例：

import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"

export default ({ data }) => {
  // Set up the array of image data and `media` keys.
  // You can have as many entries as you'd like.
  const sources = [
    data.mobileImage.childImageSharp.fluid,
    {
      ...data.desktopImage.childImageSharp.fluid,
      media: `(min-width: 768px)`,
    },
  ]

  return (
    <div>
      <h1>Hello art-directed gatsby-image</h1>
      <Img fluid={sources} />
    </div>
  )
}

export const query = graphql`
  query {
    mobileImage: file(relativePath: { eq: "blog/avatars/kyle-mathews.jpeg" }) {
      childImageSharp {
        fluid(maxWidth: 1000, quality: 100) {
          ...GatsbyImageSharpFluid
        }
      }
    }
    desktopImage: file(
      relativePath: { eq: "blog/avatars/kyle-mathews-desktop.jpeg" }
    ) {
      childImageSharp {
        fluid(maxWidth: 2000, quality: 100) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`

Answer 1

您需要使用seen_values = set() for key in ('happy', 'random', 'sad'): final_list = [] for value in dict[key]: if value in seen_values: continue seen_values.add(value) final_list.append(value) dict[key] = final_list并写下降价标记。

这里是official tutorial。此外，gatsby-starter-blog使用gatsby-transformer-remark，因此值得一看。

gatsby-image映射多个查询

1 个答案: