如何在图片网址中使用gatsby-image？

问题描述

这是在index.js中显示图像的方式及其工作原理。 imgurl基本上是图像网址。

import React from 'react';
import { graphql } from 'gatsby';

export const query = graphql`
    {
        test {
            imgurl
        }
    }
`;

export default function Home({ data }) {
    console.log(data);
    return (
        <div>
            Hello World!
            <img src={data.test.imgurl} />
        </div>
    );
}

我想使用这样的盖茨比图像：

childImageSharp {
    fixed(width: 600) {
        ...GatsbyImageSharpFixed
    }
 }

但是由于它不是本地存储的，我如何将gatsby image与图像的url一起使用？

解决方法

我通过安装名为gatsby-plugin-remote-images

的插件解决了该问题

{
    resolve: `gatsby-plugin-remote-images`,options: {
    nodeType: 'Test',// Created Node type name
    imagePath: 'imgUrl' // The image url name in test node type
    }
}

它下载imgUrl url并在Test节点类型上创建一个localImage字段，这样我们就可以在index.js文件中的gatsby中查询它：

import Img from 'gatsby-image';

export const query = graphql`
    {
        test {
            localImage {
                childImageSharp {
                    fluid {
                        ...GatsbyImageSharpFluid
                    }
                }
            }
        }
    }
`;

export default function Home({ data }) {
    return (
        <div>
            Hello world!
            <Img fluid={data.test.localImage.childImageSharp.fluid} />
        </div>
    );
}