我有以下组件。对于图像,我想使用gatsby-image和美术指导的多个图像。 gatsby-image的示例适用于单个图像,但是如何将其应用于具有多个图像的组件?
子组件:
页面组件:
const IndexPage = () => (
<Layout>
<Cards items={cards} />
</Layout>
)
const cards = [
{
title: 'Card One',desc: 'Description',image: require('../images/image.jpg'),},{
title: 'Card Two',image: require('../images/image2.jpg'),{
title: 'Card Three',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
}
}
}
}
`