gatsby-node.js-在单个父对象下添加多个图像
我试图为每个父对象添加多个图像,但是在尝试通过gatsby-node.js将多个图像节点插入graphql时遇到了问题。在graphql中,图像数据正在通过,但没有指定childImageSharp功能。我的JSON数据每个父项最多可以有4个图像,因此尝试灵活处理这些图像,而不是添加固定的image1、image2、image3和image4对象。我想要一个父图像对象,它保存子图像,无论是有1个图像还是最多4个图像。假设这是可能的 我创建了一个数组,它保存每个父引用的子图像,并将其添加到createNode函数中,想知道数组的类型是否错误?我尝试将其添加为对象 这是我的gatsby-node.js文件gatsby-node.js-在单个父对象下添加多个图像,gatsby,gatsby-image,Gatsby,Gatsby Image,我试图为每个父对象添加多个图像,但是在尝试通过gatsby-node.js将多个图像节点插入graphql时遇到了问题。在graphql中,图像数据正在通过,但没有指定childImageSharp功能。我的JSON数据每个父项最多可以有4个图像,因此尝试灵活处理这些图像,而不是添加固定的image1、image2、image3和image4对象。我想要一个父图像对象,它保存子图像,无论是有1个图像还是最多4个图像。假设这是可能的 我创建了一个数组,它保存每个父引用的子图像,并将其添加到crea
const path = require('path');
const workItems = require('./data/data.json');
exports.sourceNodes = ({ actions, createNodeId, createContentDigest }) => {
workItems.forEach((workItem) => {
const {
section,
title,
markdown,
images,
} = workItem;
const imagesNodeArray = []
images.forEach((img) => {
const [id, imgPath] = Object.entries(img)[0]
const { name, ext } = path.parse(imgPath) // get file name & extension
const absolutePath = path.resolve(__dirname, imgPath)
const data = {
name,
ext,
absolutePath,
extension: ext.substring(1),
}
const imagesNode = {
...data,
id: createNodeId(`workItem-image-${id}`),
internal: {
type: 'workItemImage',
contentDigest: createContentDigest(data),
},
};
imagesNodeArray.push(imagesNode)
})
const node = {
section,
title,
markdown,
images: imagesNodeArray,
id: createNodeId(`item-${title}`),
internal: {
type: 'workItem',
contentDigest: createContentDigest(workItem),
},
};
actions.createNode(node);
});
};
以下是源JSON文件中的示例对象:
{
"id":"ID value",
"section":"ds",
"title":"title value",
"markdown":"content/value.md",
"images":[
{
"url":"src/images/image-file.png",
"alt":"descriptive text for image here"
},
{
"url":"src/images/image-file2.png",
"alt":"descriptive text for image here"
},
{
"url":"src/images/image-file3.png",
"alt":"descriptive text for image here"
}
]
}