我有以下文件夹结构
/images
/images/pic1.jpg
/images/pic2.jpg
使用以下 GraphQL 查询时..
query MyQuery1 {
file(sourceInstanceName: {eq: "images"}, name: {eq: "pic1"}) {
name
publicURL
}
}
结果可以通过使用类似的东西来访问<img src={data.file.publicUrl} alt="" />
。到目前为止,一切都很好。
但现在我想用一个查询从该文件夹中检索多个图像。所以我想出了以下内容:
query {
allFile(
filter: {
sourceInstanceName: { eq: "images" }
name: { in: ["pic1", "pic2"] }
}
) {
nodes {
name
publicURL
}
}
}
伟大的!但是我现在如何可以访问这些图像之一,而无需使用map
或迭代结果呢?
我正在寻找这样的东西,这当然不起作用:
<img src={data.file.publicUrl name.eq="pic1"} alt="pic1"/>
也不是这样的:
<img src={data.allFile.nodes.0.publicUrl} alt="pic1" />
我想用它gatsby-image
来优化和调整我的图像。这就是我选择 GraphQL 方式而不是直接导入的原因。我在错误的轨道上吗?