I’m thinking of using Gatsby-Image for my next project and has been playing around with it a little.
I got it to work on my test project but then I came up with a use case that I would like to use the from Gatsby much like a regular <img src”image.png”>
tag. My question is therefore how I can make the Gatsby component reusable?
import React from "react"
import { StaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"
function renderImage({ file }) {
console.log({ file })
return <Img fluid={file.childImageSharp.fluid} />
}
// Stateless Image component which i guess will recieve src value as a prop?
// Returns a StaticQuery component with query prop and render prop. Query prop has the graphql query to recieve the images and render prop returns a renderImage function which in return, returns a Img component fr?n Gatsby with set attributes.
const Image = () => (
<StaticQuery
query={graphql`
query {
file(relativePath: { eq: "gatsby-astronaut.png" }) {
childImageSharp {
fluid(maxWidth: 300) {
...GatsbyImageSharpFluid
}
}
}
}
`}
// render={data => <Img fluid={data.placeholderImage.childImageSharp.fluid} />}
render={renderImage}
/>
)
export default Image
My optimal use case would be to make a dynamic request to my relativePath which is defined in my Gatsby.config file and then combine the src prop in each Gatsby and match it with all my images in my assets file and then display it. Do anyone of you know if this is even possible with ?
I read in the docs that Static Query can't take variables - only pages. But I don't want my images to be associated with a page - I want to use this component anywhere I want - like a regular img tag.
Hope I’ve made myself clear. Please ask if you have any questions.
This is an example: https://codesandbox.io/s/py5n24wk27
Thanks beforehand, Erik
See Question&Answers more detail:os