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

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

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

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

它下载 imgUrl url 并在 Test 节点类型上创建一个 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>
    );
}

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

How to use gatsby-image with an image url?

javascript

reactjs

graphql

gatsby

gatsby-image