Question

我的设置是将Ghost用作外部CMS的GatsbyJS，我正尝试在本地加载页面的所有图像。

因此，我找到了一篇博客文章，向我展示了一种针对一张图片执行此操作的方法，该方法对我有用：https://ghost.joonaviertola.com/optimize-ghost-images-in-gatsby/

然后我以为我也可以对多张图像执行此操作，而不是将一个图像链接到节点，而是创建一个包含所有图像的数组。我首先尝试了仅一张图像。直接链接图像并将图像推入节点上的数组。

imgUrls = [...]; // list of absolute URLs of remote images
node.localImages = [];

// test with only one image first
if (imgUrls.length) {
    const fileNode = await createRemoteFileNode({
        url: imgUrls[0],
        store,
        cache,
        createNode,
        parentNodeId: node.id,
        createNodeId
    });

    if (fileNode) {
        node.localImage___NODE = fileNode.id;
        node.localImages.push(fileNode);
    }
}

在GraphQL资源管理器中，我现在看到以下内容：

因此node.localImage___NODE = fileNode.id在工作，我将图像链接到节点，其中childImageSharp位于内部。

另一方面，

node.localImages.push(fileNode)似乎可以工作，因为我得到了一个数组（在这种情况下），其中包含一个图像。仅缺少childImageSharp和childMarkdownRemark，这是我想开始的部分。

现在，我不确定这整个方法是否完全错误或距离我仅一步之遥。有什么想法吗？

Answer 1

exports.onCreateNode = async ({ node, getNode, actions, store, createNodeId, cache }) => {
    const { createNodeField, createNode } = actions;
    // Download image and create a File node with gatsby-transformer-sharp.
    if ([`GhostPost`, `GhostPage`].includes(node.internal.type)) {
        // Parse HTML and get all images
        if (node.html) {
            const regex = /<img.+?src="(.+?)".+?>/g;

            let imgUrls = [];
            let matches = regex.exec(node.html);
            while (matches) {
                imgUrls.push(matches[1]);
                matches = regex.exec(node.html);
            }

            const localImages = [];

            for (const imgUrl of imgUrls) {
                if (!['.jpg', '.jpeg', '.png'].some(item => imgUrl.toLowerCase().includes(item))) {
                    continue;
                }

                const fileNode = await createRemoteFileNode({
                    url: imgUrl,
                    store,
                    cache,
                    createNode,
                    parentNodeId: node.id,
                    createNodeId
                });

                if (fileNode) {
                    localImages.push(fileNode.id);
                }
            }

            node.localImages___NODE = localImages;
        }
    }
};

不确定这是否是正确/最佳方法，但现在看来可行。从Ghost为每个帖子创建一个GhostPost节点，从html中提取所有图像（jpg和png），创建它们的图像节点，并将它们链接到GhostPost节点。

GatsbyJS-加载多个远程图像并链接到节点-没有ChildImageSharp

1 个答案: