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

Question

我在一个项目上使用 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。最好的方法是什么？这是以这种方式显示带有图像的列表的正确方法吗？

Answer 1

However as I understand it isnt possible to parameterize the image url here.

正确。 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
        }
      }
    }
  }
}

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

Showing a list of images with Gatsby Image and Graphql

graphql

gatsby

gatsby-image