I want to display the images in the static folder with StaticImage.

[botofune]

Hello.

I have passed the path to the src of the StaticImage component, but it doesn't seem to load the image file.
Could you please tell me what I'm missing?
The version of Gatsby is 4.1.0.

---

I have /components/foo.tsx and I am trying to load foo.jpg from static folder.

/components/foo.tsx

const Foo = () => {
  return (
    <div>
      <StaticImage src="/foo.jpg" alt="foo" /> // Unable to load images.
      <img src="/foo.jpg" /> // The image was loaded.
    </div>
  )
}

The Foo component is loaded in /src/pages/index.tsx.

The following message will be displayed in the terminal.

warn [gatsby-plugin-image] Could not read image data file
"[projectpath]\.cache\caches\gatsby-plugin-image\[number].json".
This may mean that the images in "[projectpath]\components\foo.tsx" were not processed.
Please ensure that your gatsby version is at least 2.24.78.
warn [gatsby-plugin-image] No data found for image "/foo.jpg"

The examples in the documentation are very simple, and I think I've written my code accordingly.

Also, the various values of StaticImage are hard-coded, not objects or return values.
Restrictions on using

---

I found a similar problem in a past discussion.
It seems that the reason was that I had not typed gatsby-pugin-image in gatsby-config.
However, my gatsby-config does have the gatsby-pugin-image typed.

gatsby-config.js

module.exports = {
  plugins: [
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
  ],
}