GatsbyJS本地图片加载异常：可筛选画廊与灯箱整合故障

问题情况 #

用Gatsby+Tailwind做可筛选图片画廊，遇到两个核心问题：

• 直接写本地路径/src/images/mbaglass1.jpeg无法渲染图片，只显示alt标签，只有GraphQL返回的/static/xxx/xxx.jpeg能正常显示
• 能用的静态URL和灯箱组件不兼容，点击灯箱提示图片找不到，同时第一次用GraphQL查询图片路径没成功，现在要把筛选和灯箱功能整合好

核心原因 #

Gatsby构建时会把本地图片压缩重命名，放到/static目录，直接写/src路径在开发/生产环境都无法被正确解析，必须通过Gatsby的图片处理插件获取处理后的合法URL；另外原代码里灯箱组件传参错误，把整个图片对象传给了mainSrc，导致灯箱找不到图片地址。

解决步骤 #

1. 用GraphQL获取处理后的图片URL
   用Gatsby的useStaticQuery查询src/images下的所有图片，拿到Gatsby处理后的publicURL，这才是能直接用的合法地址。
2. 修正灯箱组件的参数
   灯箱的mainSrc/nextSrc/prevSrc需要传图片的URL字符串，不是整个图片对象，之前的写法是传了对象，导致灯箱无法识别。
3. 替换硬编码的图片数组
   把原来手动写的images数组换成从GraphQL拿到的数据，同时手动关联每个图片的分类（如果需要更灵活的分类管理，可以用JSON文件或者MDX来存图片信息，这里用文件名匹配的方式简单实现）

修改后的代码 #

GalleryDisplay组件 #

import ImageLightbox from "react-image-lightbox"
import React from "react"
import { useStaticQuery, graphql } from "gatsby"

const GalleryDisplay = () => {
  // 查询src/images下的所有图片
  const data = useStaticQuery(graphql`
    query {
      allFile(filter: {sourceInstanceName: {eq: "images"}, extension: {in: ["jpeg", "jpg", "png"]}}) {
        nodes {
          id
          publicURL
          name
        }
      }
    }
  `)

  // 给图片分配分类（根据文件名自定义规则）
  const images = data.allFile.nodes.map(node => {
    let category = "Miscellaneous"
    if (node.name.includes("mbaglass1") || node.name.includes("mbaglass3")) {
      category = "Frameless Showers"
    } else if (node.name.includes("mbaglass2")) {
      category = "Mirrors"
    }
    return {
      id: node.id,
      src: node.publicURL,
      category,
      alt: `${category.toLowerCase().replace(" ", "-")}-${node.name}`
    }
  })

  const categories = ["All", "Frameless Showers", "Sliding Showers", "Mirrors", "Miscellaneous"]
  const [lightboxIsOpen, setLightboxIsOpen] = React.useState(false)
  const [currentImage, setCurrentImage] = React.useState(0)
  const [currentCategory, setCurrentCategory] = React.useState(categories[0])

  const openLightbox = (index) => {
    setCurrentImage(index)
    setLightboxIsOpen(true)
  }

  const closeLightbox = () => {
    setCurrentImage(0)
    setLightboxIsOpen(false)
  }

  const moveNext = () => {
    setCurrentImage(prev => (prev + 1) % images.length)
  }

  const movePrev = () => {
    setCurrentImage(prev => (prev - 1 + images.length) % images.length)
  }

  const handleFilterChange = (category) => {
    setCurrentCategory(category)
  }

  return (
    <>
      {/* 灯箱组件，只有打开时渲染 */}
      {lightboxIsOpen && (
        <ImageLightbox
          isOpen={lightboxIsOpen}
          mainSrc={images[currentImage].src}
          nextSrc={images[(currentImage + 1) % images.length].src}
          prevSrc={images[(currentImage - 1 + images.length) % images.length].src}
          onCloseRequest={closeLightbox}
          onMovePrevRequest={movePrev}
          onMoveNextRequest={moveNext}
          mainAlt={images[currentImage].alt}
        />
      )}

      {/* 分类筛选按钮 */}
      <div className="flex flex-wrap justify-center py-4">
        {categories.map(category => (
          <button
            key={category}
            className="px-4 py-2 m-2 rounded-lg text-center text-white bg-blue-500 hover:bg-blue-600"
            onClick={() => handleFilterChange(category)}
          >
            {category}
          </button>
        ))}
      </div>

      {/* 图片画廊 */}
      <div className="grid p-8 lg:p-16 gap-x-4 gap-y-8 sm:grid-cols-1 sm:gap-x-4 md:grid-cols-2 md:gap-x-8 lg:grid-cols-3 xl:gap-x-12">
        {images
          .filter(image => image.category === currentCategory || currentCategory === "All")
          .map((image, index) => (
            <a key={image.id} onClick={() => openLightbox(index)}>
              <img className="rounded-lg" src={image.src} alt={image.alt} />
            </a>
          ))}
      </div>
    </>
  )
}

export default GalleryDisplay

确认gatsby-config配置 #

你的现有配置已经正确，保持不变即可：

module.exports = {
  siteMetadata: {
    title: `Gatsby`,
    siteUrl: `https://www.gatsbyjs.com`,
    description: `Blazing fast modern site generator for React`,
  },
  plugins: [
    `gatsby-plugin-image`,
    'gatsby-plugin-postcss',
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`,
      },
    },
  ],
}

内容的提问来源于stack exchange，提问作者grasshopper-dyl