Question

我正在使用GatsbyJS / React创建的网站上，由于以下文章（https://416serg.me/building-a-custom-accessible-image-lightbox-in-gatsbyjs）创建了Lightbox画廊，因此创建了我。

现在，图库从我的图像目录中获取图像，但是我想通过GraphQL从Contentful中获取图像。我已经用Contentful添加了其他内容，但是图库中的图像我无法做到。

我尝试了几种选择都没有成功，希望您能为我提供帮助。

从cars.js文件中获取图像：

import React from 'react';
import { StaticQuery, graphql } from 'gatsby';
import Lightbox from './lightbox';

const Cars = () => (
  <StaticQuery
    query={graphql`
      query {
        carImages: allFile(filter: {sourceInstanceName: { eq: "cars" }}) {
          edges {
            node {
              childImageSharp {
                fluid(maxWidth:2000) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      }
    `}
    render={data => <Lightbox carImages={data.carImages.edges} />}
  />
);
export default Cars;

然后，我创建另一个组件（lightbox.js）以创建灯箱：

import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import Img from 'gatsby-image';
import styled from 'styled-components';
import { Dialog } from '@reach/dialog';
import '@reach/dialog/styles.css';
import { IoMdClose } from "react-icons/io";

import photoStyles from '../styles/photography.module.scss'

const LightboxContainer = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 5px;
`;

const PreviewButton = styled.button`
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  max-width: 300px;
  width: 300px;
  margin: 5px;
`;

export default class Lightbox extends Component {
  static propTypes = {
    carImages: PropTypes.array.isRequired, // eslint-disable-line
  }

  constructor(props) {
    super(props);

    this.state = {
      showLightbox: false,
      selectedImage: null,
    };
  }

  render() {
    const { carImages } = this.props;
    const { selectedImage, showLightbox } = this.state;
    return (
      <Fragment>
        <LightboxContainer>
          {carImages.map(image => (
            <PreviewButton
              key={image.node.childImageSharp.fluid.src}
              type="button"
              onClick={() => this.setState({ showLightbox: true, selectedImage: image })}
            >
              <Img fluid={image.node.childImageSharp.fluid} />
            </PreviewButton>
          ))}
        </LightboxContainer>
        {showLightbox && (
        <Dialog className={photoStyles.popup}>
          <Img fluid={selectedImage.node.childImageSharp.fluid} className={photoStyles.popup}/>
          <IoMdClose className={photoStyles.close} onClick={() => this.setState({ showLightbox: false })} />

        </Dialog>
        )}
      </Fragment>
    );
  }
}

最后，我将组件添加到页面：

import React from "react"

import Layout from "../components/layout"
import Cars from '../components/cars';

import photoStyles from '../styles/photography.module.scss'

const Photography = () => (
  <Layout>
    <div style={{ maxWidth: '300px', marginBottom: '1.45rem' }}>
    </div>
    <div className={photoStyles.lightbox}>
        <Cars />
    </div>
  </Layout>
);

export default Photography;

有争议的是，为了获取图像src，它是以下查询：

query {
  allContentfulGallery {
    edges {
      node {
        images {
          fluid {
            src
          }
        }
      }
    }
  }
}

无法从Gatsby中的Contentful API获取数据

0 个答案: