How to pass a path of image as a prop in Gatsby in Gatsby-plugin-image

Question

I am trying to pass a path of an image as a prop to a component

Note: Both the component and the index page can access the image through the same path. It is not working when i pass the path as a prop

In the below code i have tried with both GatbsyImage and StaticImage tag both seems to fail

index.js

import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import '../styles/index.scss';
import Main from  '../Layouts/main';
import ImageOverlay from '../components/ImageOverlay';
import { StaticImage } from "gatsby-plugin-image"

function Home(){
  // Home page images
  return (
    <Main >
    <section className="home_page">
      <ImageOverlay path="../images/home/places/portblair.png"> </ImageOverlay>
    </section>
    </Main>
  )
}

export default Home
 

components/ImageOverlay.js

import React from 'react';
import { GatsbyImage, StaticImage } from "gatsby-plugin-image"
const ImageOverlay = ({path}) =>{
    return(

      <div>
          <GatsbyImage image={path}></GatsbyImage>
          <StaticImage src={path}></StaticImage>
      </div> 
  
    )
}
export default ImageOverlay;

I used GatsbyImage and StaticImage just incase to check

Thanks for the help in advance

Monocoque

Answer 1

You can't use outer props on StaticImage, it's a known restriction:

Restrictions on using StaticImage

There are a few technical restrictions to the way you can pass props into StaticImage. Most importantly, you can’t use any of the parent component’s props. For more information, refer to the Gatsby Image plugin reference guide. If you find yourself wishing you could use a prop passed from a parent for the image src then it’s likely that you should be using a dynamic image.

And extending the referenced guide:

// ⚠️ Doesn't work
export function Logo({ logo }) {
  // You can't use a prop passed into the parent component
  return <StaticImage src={logo}>
}

The solution, if you want to use StaticImage is to use the static approach, appending the src directly:

import React from 'react';
import { GatsbyImage, StaticImage } from "gatsby-plugin-image"
const ImageOverlay = ({path}) =>{
    return(

      <div>
          <StaticImage src={`../images/home/places/portblair.png`}></StaticImage>
      </div> 
  
    )
}
export default ImageOverlay;

If you want to use GatsbyImage, you will need to query your image to get the proper data:

import { graphql } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"

function Home({ data }) {
 const image = getImage(data.blogPost.avatar)
 return (
   <section>
     <GatsbyImage image={image} alt={data.blogPost.author} />
     <p>{data.blogPost.body}</p>
   </section>
 )
}

export const pageQuery = graphql`
 query {
   blogPost(id: { eq: $Id }) {
     title
     body
     author
     avatar {
       childImageSharp {
         gatsbyImageData(
           width: 200
           placeholder: BLURRED
           formats: [AUTO, WEBP, AVIF]
         )
       }
     }
   }
 }
`

Note: of course, adapt the snippet to your needs but get the idea

If you want to use a dynamic image, you are forced to make a GraphQL query to allow Gatsby and their transformers to parse and resolve the image. You can use the bunch of available filters to create a specific query for your image using as well as the relativePath and the absolutePath, test the query at localhost:8000/___graphql.

Wear

Answer 2

While you can't pass the src for StaticImage as a string from the parent component you can still pass a StaticImage:

Component

…
const ImageOverlay = ({staticImage}) =>{
  return <div>
    {staticImage('myClass')}
  </div> 
}
export default ImageOverlay;

Parent (consumer)

…
const ImageOverlay = ({path}) =>{
  return <div>
    <ImageOverlay
      staticImage={className => <StaticImage
        className={className}
        src="../images/home/places/portblair.png"
        alt="Portblair"
    />}
  </div> 
}

Saberhagen