我有以下文件夹结构
/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"/>
Nor不会这样:
<img src={data.allFile.nodes.0.publicUrl} alt="pic1" />
我想使用gatsby-image
来优化图像并调整其大小。这就是为什么我选择GraphQL方法而不是直接导入的原因。我走错了路吗?