GatsbyJS显示图像目录以及每个图像的属性

时间:2019-02-27 03:56:50

标签: gatsby

我想显示50名员工的头像以及他们的姓名和医学院。

现在,我通过对目录中的每个人进行一个名为graphql的查询来做到这一点。因此,有50个命名查询。这是一个示例:

query = graphql`
  query {
    joeBond:file(relativePath:{ regex: "/joebond/"}) {
      ...headshotImage
    }
    janeReed:file(relativePath:{ regex: "/janereed/"}) {
      ...headshotImage
    }

接下来,我检索graphql响应并像这样对照片中的人的姓名和医学院进行硬编码:

<HeadshotImage 
   imgSrc={data.joeBond} 
   fullName="Joe Bond" 
   medicalSchool="University of South Alabama" 
/>

<HeadshotImage 
   imgSrc={data.janeReed} 
   fullName="Jane Reed" 
   medicalSchool="University of Kentucky" 
 />

如果所有项目都位于一个连贯的列表中,例如:

const faceshots = [
  { 
    name: "Joe Bond", 
    medicalSchool: "U Kentucky", 
    image: "joebond.png" 
  },
  ....
]

但是,我不知道如何进行可以与此类列表“链接”的graphql查询。

有人建议使用一种方法来解决此问题吗?

0 个答案:

没有答案