3

我在一个项目上与 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。解决此问题的最佳方法是什么？这甚至是以这种方式显示带有图像的列表的正确方法吗？

4

1 回答 1

2

但是，据我了解，无法在此处参数化图像 url。

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

两种方法：

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

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>
  );
};

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

  allUserList {
      users {
        name
        imageUrl
        childImageSharp { // the query path is probably wrong since I don't know your project
          fixed(width: 160, height: 160) {
            ...GatsbyImageSharpFixed
        }
      }
    }
  }
}
于 2020-01-26T02:52:25.067 回答