如何改进对特定图像的 gatsby 图像查询

Posted 2023-03-08

【中文标题】如何改进对特定图像的 gatsby 图像查询

【英文标题】：How to improve gatsby image querying for specific images

【发布时间】：2022-01-02 16:38:07

【问题描述】：

只是对任何有助于减轻 Gatsby 网站内图像查询压力的解决方案感到好奇。 Gatsby 已经给出了图片查询时间过长的警告（我们网站内有大约 600 张图片，而且增长速度非常快）。

理想情况下，我希望每次只获取一张特定的图片，但不想为每个图片创建静态查询。

到目前为止，我在Image 组件中的查询是这样的：

    query=graphql`
      
        images: allFile(filter:  sourceInstanceName:  eq: "images"  ) 
          edges 
            node 
              relativePath
              name
              childImageSharp 
                gatsbyImageData(
                  quality: 100
                  layout: CONSTRAINED
                  placeholder: TRACED_SVG
                )
              
            
          
        
      
    `
    render=data => 
      const image = data.images.edges.find(n => 
        return n.node.relativePath.includes(filename);
      );
      if (!image) 
        return null;
      

      const imageAlt = filename.split('.')[0];
      return (
        <GatsbyImage
          image=image.node.childImageSharp.gatsbyImageData
          className=className
          style=styles
          alt=alt ? alt : imageAlt
          fadeIn=false
        />
      );
    
  />

我只是想听听有人为 Gatsby 上更大的图像数据库提出的任何解决方案 :)

【问题讨论】：

简单地使用像 Sanity 这样的 CMS 更具可扩展性，它具有良好的图像托管和动态转换 API。然后，您可以在 GraphQL 中获取图像 ID 并将它们传递给 gatsby-plugin-sanity-image，并动态生成完整的 srcSet，每个 URL 都指向一个不会影响构建时间的服务器渲染图像。

【参考方案1】：

在您使用Image 组件的方式中，由于使用了StaticQuery 或useStaticQuery 钩子（因为它们不接受动态参数）。所以基本上，你得到所有的负载来过滤它，只得到想要的图片。

我想您在这里唯一的选择是摆脱静态查询并在 page query 中获取该图像，基于应该使用上下文或在所需页面中手动提升的某些过滤器（或基于其他页面场地）。这种方式比请求 600 幅图像只渲染 1 幅要好得多。

【讨论】：

感谢您的回答，我目前正在寻找更动态的解决方案。我正在考虑将 Apollo 集成到 Gatsby 项目中，并在 Image 组件内使用带有动态参数的 useQuery 钩子，这样我就可以传递图像名称，它就可以完成工作。你怎么看待这件事？将 Apollo 和 Gatsby 集成在一起是一种好习惯吗？

如果您正在寻找更“动态”的集成，使用 apollo 是实现它的一种方法。 “把阿波罗和盖茨比融合在一起，是不是很好？”好吧，这取决于需求。这比每次需要 1 时查询 600 张图像要好得多，这是一个很好的解决方案。但是，根据您的项目结构，可以在创建页面时使用使用上下文的内置过滤来实现。

你的意思是一次获取所有图像，然后将它们存储在上下文中并从那里过滤吗？

缺少代码/项目结构。但是当你在 Gatsby 中创建页面时，你有一个可用的上下文。在那里，您可以将任何值发送到允许您使用该值（上下文）进行查询和过滤的视图，因此在您查询页面数据时，您还可以使用这些值获取所需的图像，避免使用静态查询，使用页面查询（gatsbyjs.com/docs/creating-and-modifying-pages 和gatsbyjs.com/docs/how-to/querying-data/page-query）。该方法类似于@coreyward 在评论中描述的方法