reactjs - 如何从 Gatsby.js 中的 YAML 数组中获取图像
问题描述
我正在用 Gatsby.js 开发一个博客
每个帖子都是一个 YAML 文件,其中有一个画廊的数组,如下所示:
gallery:
-'/uploads/image1.jpg'
-'/uploads/image2.jpg'
-'/uploads/image3.jpg'
-'/uploads/image4.jpg'
-'/uploads/image5.jpg'
在帖子中我有这样的东西:
const images = data.postData.frontmatter.gallery;
return (
{images.map((image, index) => {
return (
<img src={image}/>
)
}
)};
export const query = graphql`
query PostData($slug: String!) {
postData: markdownRemark(fields: {slug: {eq: $slug}}) {
frontmatter {
gallery
}
}
}
`;
但是图像没有显示出来,因为它们在构建时没有被处理并放在静态文件夹中。
据我了解,插件“gatsby-plugin-sharp”并没有转换在 YAML 文件的数组中找到的图像,但是当它只是一个图像时它会......
(在某些帖子中有一个这样的字段
main-image: 'path/to/the/image'
然后我可以像这样使用graphql获取:
main-image {
fluid {
src
}
}
}
而对于 'gallery' 数组,不会创建 'fluid' 节点。)
我希望这是有道理的,我意识到我对有些事情有点困惑,我希望你能帮助我理解一些事情。
谢谢,
米
编辑
感谢@Z,我前进了一点。兹拉捷夫。
我将它插入到 gatsby-node.js 中:
exports.createSchemaCustomization = ({ actions }) => {
const { createTypes } = actions;
const typeDefs = `
type MarkdownRemark
implements Node {
frontmatter: Frontmatter
}
type Frontmatter {
gallery: [File]
}
`;
createTypes(typeDefs);
};
现在为画廊数组中的每个图像创建节点。
但是,查询我得到空的图像......
这里有一些细节:
YAML 文件:
---
date: 2019-11-06T13:47:07.000+00:00
title: Cool Project
main_picture: "/uploads/simon-matzinger-Gpck1WkgxIk-unsplash.jpg"
gallery:
- "/uploads/PROEGELHOEF.jpg"
- "/uploads/swapnil-dwivedi-N2IJ31xZ_ks-unsplash-1.jpg"
- "/uploads/swapnil-dwivedi-N2IJ31xZ_ks-unsplash.jpg"
- "/uploads/simon-matzinger-Gpck1WkgxIk-unsplash.jpg"
---
这里是 GraphQl 查询:
query MyQuery {
allMarkdownRemark(filter: {id: {eq: "af697225-a842-545a-b5e1-4a4bcb0baf87"}}) {
edges {
node {
frontmatter {
title
gallery {
childImageSharp {
fluid {
src
}
}
}
}
}
}
}
}
这里是数据响应:
{
"data": {
"allMarkdownRemark": {
"edges": [
{
"node": {
"frontmatter": {
"title": "Cool Project",
"gallery": [
{
"childImageSharp": null
},
{
"childImageSharp": null
},
{
"childImageSharp": null
},
{
"childImageSharp": null
}
]
}
}
}
]
}
}
}
我想我仍然缺少一些东西......
解决方案
我将尝试解释这在 Gatsby 中是如何工作的。首先,它是将节点gatsby-transformer-sharp
转换为节点的插件。当然也作为低级 API 参与其中。File
ImageSharp
gatsby-plugin-sharp
您遇到的主要问题是 Gatsby 无法识别(推断)您的数据作为对文件的引用。一旦它完成了一系列转换,就会自动启动。Gatsby 实际上试图确定字符串是否是文件路径,但这些路径必须相对于它们所在的文件。
考虑以下示例:
gatsby-project
├── content
│ ├── images
│ │ └── home.png
│ └── pages
│ └── home.yml
└── src
内容/页面/home.yml
title: Homepage
url: /
image: ../images/home.png
最简单的解决方案是在您的 yaml 文件中提供正确的相对路径。可悲的是,我们知道这并不总是可能的。NetlifyCMS 创建的文件就是一个例子。如果这是您的情况,请尝试一些现有的解决方案,例如: https ://www.gatsbyjs.org/packages/gatsby-plugin-netlify-cms-paths/
自 Gatsby 2.2.0 以来,createSchemaCustomization
API 的存在允许我们通过定义自定义解析器和字段扩展来更优雅地处理此类场景,但对于不熟悉 GraphQL 的人来说,这可能会令人生畏。在此处阅读更多相关信息。
推荐阅读
- javascript - 将嵌套对象相互排序
- python - 熊猫日期时间验证
- javascript - 如何以编程方式触发 Mapbox GL JS Geocoder?
- r - 是否有计算给定条件的行数的函数?
- php - 拦截 GuzzleHTTP 请求和响应体
- lua - 罗技 G Hub 脚本 - 即使在我松开鼠标左键后,代码有时也会继续运行
- json - 使用Shapeless HList轻松搭建Json Decoder
- email - PHPmailer 发送到 yahoo 地址
- amazon-web-services - 如何避免 GraphQL (AWS App Sync) 中的隐式“空”替换?
- css - 将 css 选择器限制为一个类而不重复类名