显示带有盖茨比图像和Graphql的图像列表

我已经和盖茨比和GraphQL在一个项目上合作了一段时间。这是我第一次使用这个平台，所以仍然在寻找正确的方法

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

  allUserList {
      users {
        name
        imageUrl
    }
  }
}

imageUrl应发送正确的文件路径，即

images/image.png

这将直接发送到react组件，该组件用于显示用户信息

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

然而，据我所知，这里不可能参数化图像url。最好的办法是什么？以这种方式显示包含图像的列表是否正确

然而，据我所知，这里不可能参数化图像url

对。盖茨比在构建时运行一次GraphQL查询，然后再运行一次，直到您再次

盖茨比开发

或

盖茨比构建

两种方法：

第一种方法：以

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

---

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

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 {
      users {
        name
        imageUrl
        childImageSharp { // the query path is probably wrong since I don't know your project
          fixed(width: 160, height: 160) {
            ...GatsbyImageSharpFixed
        }
      }
    }
  }
}