gatsby-node.js-在单个父对象下添加多个图像

时间:2020-08-03 05:43:50

标签: gatsby gatsby-image

我正在尝试为每个父对象添加多个图像,但是在尝试通过gatsby-node.js将多个图像节点插入graphql时卡住了。在graphql中,图像数据通过,但未分配childImageSharp功能。我的JSON数据每个父项最多可以包含4张图像,因此要尽量灵活一些,而不是添加固定的image1,image2,image3,image4对象。我想要一个包含子图像的父图像对象,无论是否有1张图像或最多4张图像。假设有可能?

我创建了一个数组,该数组保存每个父引用的子图像,并将其添加到createNode函数中,想知道数组的类型是否错误?我尝试将其添加为对象。

这是我的gatsby-node.js文件

webserver UI.

这是源JSON文件中的示例对象:

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);
        
    });
    
};

0 个答案:

没有答案