如何将 gatsby-image 与图像 url 一起使用？答案

【问题标题】：How to use gatsby-image with an image url?如何将 gatsby-image 与图像 url 一起使用？
【发布时间】：2021-02-10 13:52:20
【问题描述】：

这就是图像在 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
    }
 }

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

【问题讨论】：

标签： javascript reactjs graphql gatsby gatsby-image

【解决方案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
    }
}

它下载 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>
    );
}

【讨论】：