使用 Gatsby Image 和 Graphql 显示图像列表

Posted 2023-03-08

【中文标题】使用 Gatsby Image 和 Graphql 显示图像列表

【英文标题】：Showing a list of images with Gatsby Image and Graphql

【发布时间】：2020-05-10 10:43:42

【问题描述】：

我在一个项目上与 Gatsby 和 GraphQL 合作了一段时间。这是我第一次使用这个平台，所以还在寻找正确的方法。

现在，我有一个 index.js，它从 GraphQL 查询中加载用户列表，例如

  allUserList 
      users 
        name
        imageUrl
    
  

imageUrl 应该发送正确的文件路径，即images/image.png 这被直接发送到用于显示用户信息的反应组件

const Users = data => 
  return (
    data.users.map(user => 
      return (
        <User name=user.name imageUrl=user.imageUrl/>
      )
    
  )

我现在想弄清楚的是，imageUrl 包含代码库中图像的相对 url。我将需要在此 url 上运行图像查询以获取图像对象，然后我可以将其传递给 gatsby 图像。像这样的

  image: file(relativePath:  eq: 'image.png' ) 
    childImageSharp 
      fixed(width: 160, height: 160) 
        ...GatsbyImageSharpFixed
      
    
  

但是据我了解，无法在此处参数化图像 url。解决此问题的最佳方法是什么？这甚至是以这种方式显示包含图像的列表的正确方法吗？

【问题讨论】：

这有帮助吗？ ***.com/a/55131132/5385381

【参考方案1】：

但据我了解，无法在此处参数化图片网址。

正确。 Gatsby 在构建时运行一次 GraphQL 查询，然后在您再次 gatsby develop 或 gatsby build 之前不再运行。

两种方法：

第一种方法：以user.name 命名图像。然后，您可以使用 graphQL originalName 属性查询所有图像并按文件名过滤每个用户：

const UserSupplier = () => 
  const  allFile  = useStaticQuery(graphql`
    query 
      allFile(filter: 
        extension: regex: "/(jpg)|(jpeg)|(png)/", 
        sourceInstanceName: eq: "user") 
      
        edges 
          node 
            childImageSharp 
              fluid(maxWidth: 150, quality: 100) 
                originalName
                ...GatsbyImageSharpFluid
              
            
          
        
      
    `);
  const user = users.filter(el => el.userId === userId)[0];
  const  fluid  = user .node.childImageSharp;

  return (
    <UserComponent>
      <GatsbyImage fluid=fluid alt=fluid.originalName />
    </UserComponent>
  );
;

第二种方法：在您的allUserList 查询中查询您的childImageSharp 图像对象。您可以将图像作为道具传递给呈现图像的组件。这将使您的查询结果查询非常数据密集，具体取决于有多少用户。

  allUserList 
      users 
        name
        imageUrl
        childImageSharp  // the query path is probably wrong since I don't know your project
          fixed(width: 160, height: 160) 
            ...GatsbyImageSharpFixed
        
      
    
  

【讨论】：

我希望有一种方法可以参数化这样的东西，但这也很好用！

我在很多地方都看到了多个类似的答案，我不明白的一件事是您在第二个解决方案中在哪里提供图像的 url？ graphql 如何知道从哪里获取图像？