graphql - ...GatsbySanityImageFluid - 无法读取 null 的属性“流体”
问题描述
我正在与理智和盖茨比合作
我正在尝试映射一组图像以在图像库中显示它们。我的 GraphQL 查询正在运行,我可以显示单个图像,但收到错误消息:TypeError: Cannot read property 'fluid' of null
当我尝试映射数组时。
任何方向都非常感谢!
我的查询:
{
sanityGallery {
images {
asset {
fluid {
...GatsbySanityImageFluid
}
}
}
}
}
这有效:
const images = data.sanityGallery.images
<Img className="grow" fluid={images[0].asset.fluid} />
这不会:
const images = data.sanityGallery.images
<div className="img-container">
{images.map((image, index) => {
console.log(image.asset.fluid); // <-- when adding this it logs the info in the screenshot below
return (
<div className="box">
<Img className="grow" fluid={image.asset.fluid} key={index} />
</div>
)
})}
</div>
解决方案
尝试类似:
const images = data.sanityGallery.images
<div className="img-container">
{images.map((image, index) => {
console.log(image.asset); //
return (
<div className="box">
{image.asset && <Img className="grow" fluid={image.asset.srcSet} key={index} />}
</div>
)
})}
</div>
推荐阅读
- css - 根据屏幕大小动态更改元素位置
- laravel - 无法在 Laravel 中检索对象属性
- vim - 如何使用vim缩进文本文件的偶数/奇数行
- java - 如何修复“java.sql.SQLException:数据库已关闭”问题
- random - 建模随机事件时的整数或双精度数
- python - 用“|”执行linux命令 和 Python 中的 "'\n'"
- python - ModuleNotFoundError:没有名为“apiclient”的模块
- angular - 在 NGXS 操作中调用后尝试关闭材料小吃吧不起作用
- javascript - 转换 JSON 对象
- c - 如何扫描和打印最多包含 20 个变量的数组?