Как я могу сопоставить мой экспорт по умолчанию в GraphQL с Gatbsy Image? - PullRequest
Новая
       48

Как я могу сопоставить мой экспорт по умолчанию в GraphQL с Gatbsy Image?

0 голосов
/ 10 февраля 2020

Я хочу отобразить свой экспорт в GraphQL, вместо того, чтобы повторять мои изображения 3 раза, проверьте мой код, чтобы понять меня.

это мой экспорт: 

    export default [
  {
    id: Math.random(),
    imageUrl: require("../../images/recent-game/1.jpg"),

  },
  {
    id: Math.random(),
    imageUrl: require("../../images/recent-game/2.jpg"),

  },
  {
    id: Math.random(),
    imageUrl: require("../../images/recent-game/3.jpg"),

  },
]

Это мой импорт и GraphQL 

import BackgroundImage from "gatsby-background-image"
import { useStaticQuery, graphql } from "gatsby"
const getData = graphql`
  {
    image1: file(relativePath: { eq: "recent-game/1.jpg" }) {
      childImageSharp {
        fluid {
          ...GatsbyImageSharpFluid
        }
      }
    }
    image2: file(relativePath: { eq: "recent-game/2.jpg" }) {
      childImageSharp {
        fluid {
          ...GatsbyImageSharpFluid
        }
      }
    }
    image3: file(relativePath: { eq: "recent-game/3.jpg" }) {
      childImageSharp {
        fluid {
          ...GatsbyImageSharpFluid
        }
      }
    }

  }
`

Здесь я хочу отобразить мои изображения вместо того, чтобы повторять их, в зависимости от моего экспорта

1 Ответ

1 голос
/ 10 февраля 2020

Как насчет многократно используемого компонента изображения? 

// Image
import React from 'react';
import { StaticQuery, graphql } from 'gatsby';
import Img from 'gatsby-image';

const Image = props => (
  <StaticQuery
    query={graphql`
      query {
        images: allFile {
          edges {
            node {
              relativePath
              name
              childImageSharp {
                fluid(maxWidth: 1000) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      }
    `}
    render={data => {
      const image = data.images.edges.find(n => {
        return n.node.relativePath.includes(props.filename);
      });
      if (!image) {
        return null;
      }

      // const imageSizes = image.node.childImageSharp.sizes; sizes={imageSizes}
      return <Img alt={props.alt} fluid={image.node.childImageSharp.fluid} />;
    }}
  />
);

export default Image;

И компонентов карты. 

// Parent
{
  [
    { id: 0, filename: "gatsby-icon.png" },
    { id: 1, filename: "gatsby-icon.png" }
  ].map(item => {
    return (
      <div key={item.id}>
        <Image filename={item.filename} alt={String(item.id)} />
      </div>
    );
  });
}

Вы, конечно, должны проверить gatsby-source-filesystem.

...