如何使用带有图像url的gatsby-image？

Question

这就是图像在index.js中的显示方式以及它的工作原理。imgUrl基本上是一个图像url。

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

我想像这样使用gatsby镜像：

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

但是，由于它不是本地存储的，我如何通过图像的url使用gatsby图像呢？

Answer 1

我通过安装一个名为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
    }
}

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

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