CODEWITHSUNDEEP
javascriptreactjsgraphqlgatsbygatsby-image
Mehdi Faraji
Mehdi Faraji

Reputation: 3806

How to use gatsby-image with an image url?

This is how the image is shown in index.js and it works . The imgUrl is basically an image 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>
    );
}

I want to use gatsby image like this :

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

But since it's not stored locally how can I use gatsby image with the url of an image ?

Upvotes: 1

Views: 5591

Answers (1)

Mehdi Faraji
Mehdi Faraji

Reputation: 3806

I solved the issue by installing a plugin named 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
    }
}

It downloads the imgUrl url and creates a localImage field on Test node type so we can query it inside gatsby like this in index.js file :

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

Upvotes: 4

Related Questions