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
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 imagesrc
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
.