Gatsby JS - загрузить несколько удаленных изображений и ссылку на узел - нет ChildImageSharp - PullRequest
Новая
       23

Gatsby JS - загрузить несколько удаленных изображений и ссылку на узел - нет ChildImageSharp

0 голосов
/ 21 февраля 2020

Моя настройка Gatsby JS с Ghost в качестве внешней CMS, и я пытаюсь загрузить все изображения страницы локально.

Так что я нашел сообщение в блоге, показывающее мне способ сделать это для одного image, который работал для меня: 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 теперь я вижу следующее:

enter image description here

Итак, node.localImage___NODE = fileNode.id работает, и я получаю изображение, связанное с узлом, с childImageSharp внутри.

node.localImages.push(fileNode), с другой стороны, кажется, работает, потому что я получаю массив с (в данном случае) одно изображение внутри. Отсутствуют только childImageSharp и childMarkdownRemark, с которых я и хотел начать.

Сейчас я не уверен, что весь этот подход совершенно неверен или я просто крошечный отойди. Есть мысли?

1 Ответ

0 голосов
/ 22 февраля 2020 
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;
        }
    }
};

Не уверен, что это правильный / лучший подход, но, похоже, он работает сейчас. Создание узла GhostPost для каждого поста из Ghost, извлечение всех изображений (jpg и png) из html, создание их узлов изображений и связывание их с узлом GhostPost.

...