GatsbyImage - src with props

[robertocerdasilva]

hello everyone, i have a problem displaying an image.

I already saw the documentation and understand that the "src" property cannot be used with variables.

But the documentation to show a dynamic image I cannot understand it because every time I try to apply its examples I do not get the desired result.

In my files I have the following images:

- images/
- - - image1.png
- - - image2.png
- - - image3.png

My component:

import React from 'react'
import { StaticImage } from 'gatsby-plugin-image'

export default Avatar = ({ image }) => {
    
    return(
        <StaticImage
            src={ `../../images/${ image }.png` }
            width={36}
            quality={95}
            formats={['PNG']}
            alt=""
            className="rounded-circle mr-2"
        />
    )
}

Import Component:
<Avatar image="image1"/>

how can I do this using GatsbyImage? any good and simple example?

Thank you!

[vladar]

StaticImage only works with static src props (hence the component name). If you know that there could be only fixed number of images, you could do something like this:

import React from 'react'
import { StaticImage } from 'gatsby-plugin-image'

export default Avatar = ({ image }) => {
  const imageProps = {
    width: 36,
    quality: 90,
    formats: ['PNG'],
    alt: '',
    className="rounded-circle mr-2"
  }
  if (image === "image1") {
    return <StaticImage src="../../images/image1.png" {...imageProps} />
  } else if (image === "image2") {
    return <StaticImage src="../../images/image2.png" {...imageProps} />
  } else {
    return <StaticImage src="../../images/image3.png" {...imageProps} />
  }
}

But if you can have a dynamic number of images, you cannot use StaticImage component and must use GatsbyImage. Documentation on it is here: https://www.gatsbyjs.com/docs/how-to/images-and-media/using-gatsby-plugin-image/#dynamic-images

[robertocerdasilva]

Hello. Thanks for answering but this does not answer my question.
I put in my problem that I understood that for dynamic images you should not use StaticImage. But the documentation and examples to use GatsbyImage is unclear and it is not understood how to implement based on my need or the example I shared.

Still I appreciate the time to reply.

[mwskwong]

This is what I'm doing #31379. See the bottom part of the OP.
Yet, as stated in that post, I'm not sure whether this will impact performance.

[mwskwong]

Also @vladar, currently what we can specify in the src prop is the path relative to the source file. Is it possible to use an absolute path instead?

e.g. following the example in the OP, is it possible to do the following?

<StaticImage src="images/image1.png" />

Are there any plugins that can enable this currently? I tried gatsby-source-filesystem and gatsby-plugin-root-import but they don't seem to enable what I'm looking for.