如何使用 gatsby-image 查询全尺寸图像？

Question

我需要一些关于 gatsby-image 的建议。我正在构建一个带有自定义灯箱的画廊。

查询：

export const getAllPhotos = graphql`
query GetAllPhotos {
    allStrapiPortfolio {
        photos: nodes {
            categories {
                name
            }
            photo {
                childImageSharp {
                    fluid(quality: 100) {
                        ...GatsbyImageSharpFluid
                    }
                }
            }
            strapiId
        }
    }
}
`;

我在网格中显示我的图像。 photos prop 包含来自上述查询的图像。

Gallery.js

const Gallery = ({ photos }) => {
const [currentPhotoId, setCurrentPhotoId] = useState(null);

const handleClick = (e) => {
    const lightbox = document.getElementById("lightbox");
    const div = parseInt(e.target.parentElement.parentElement.className.split(" ")[0]);
    const imgSelected = e.target.parentElement.parentElement.className.includes("gatsby-image-wrapper");

    if (imgSelected) {
        setCurrentPhotoId(div);
        lightbox.classList.add("lightbox-active");
    } else {
        setCurrentPhotoId(null);
        lightbox.classList.remove("lightbox-active");
    }
};

return (
    <main className="portfolio-gallery" onClick={(e) => handleClick(e)}>
        photos.map((item) => {
                    return (
                        <Image
                            key={item.strapiId}
                            fluid={item.photo.childImageSharp.fluid}
                            data-categories={item.categories[0]}
                            alt={item.categories[0].name}
                            className={`${item.strapiId}`}
                        />
                    );              
              })}
        <Lightbox photos={photos} currentPhotoId={currentPhotoId} />
    </main>
);
};

export default Gallery;

点击图片后，我会显示我的灯箱组件

lightbox.js

const Lightbox = ({ photos, currentPhotoId }) => {
const currentPhoto = photos.filter((photo) => photo.strapiId === currentPhotoId)[0];

return currentPhotoId === null ? (
    <div id="lightbox" className="lightbox">
        <h4>Nothing to display, this is hidden currently</h4>
    </div>
) : (
    <div id="lightbox" className="lightbox">
        <Image fluid={currentPhoto.photo.childImageSharp.fluid} />
    </div>
);
};

export default Lightbox;

问题是，当我在整个屏幕上拉伸的灯箱中显示我的图像时，它的质量很差，因为查询会下载小尺寸的图像。但是，我的原始图像是 5000px 宽。不幸的是，由于 gatsby 页面查询是在构建时生成的，所以我坚持这种质量。

对解决方法有任何想法吗？

Answer 1

在使用gatsby-images 处理多张图像时的想法是使用art director workaround（断点）查询不同的图像分辨率。基于文档的想法是：

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
        }
      }
    }
  }
`