Support Gatsby's <StaticImage>

[mosesoak]

Versions

• package_name: 0.0.2
• node: 12.18.3, also tried on 14.17.1
• "gatsby": "^3.8.0"

Reproduction

This Stack Overflow post shows the exact question and setup needed, basically just add a StaticImage in a component and make a story for it. https://stackoverflow.com/questions/68231092/gatsbys-staticimage-not-rendering-in-storybook

Additional Details

Steps to reproduce

See link above.

What is expected?

Should storybook be able to load the static image? It does not.

What is actually happening?

The error in the link above,

Please ensure that "gatsby-plugin-image" is included in the plugins array in gatsby-config.js, and that your version of gatsby is at least 2.24.78
(anonymous) @ static-image.server.tsx:52

I understand that storybook is not running gatsby, just using webpack to strip out queries, but none of the documentation anywhere suggests that images aren't usable across the divide or offers any solution to how images should be shown in Storybook. So I don't know for sure that this is a bug and not expected behavior, it's just a dead end. Thanks!

[mosesoak]

After some more digging I found a Gatsby issue on this problem: https://github.com/gatsbyjs/gatsby/issues/26099 (they try to refer people to bother you here so, blame them for my noise 😉)

And they also refer to their GitHub discussions, where I found this, also unresolved: https://github.com/gatsbyjs/gatsby/discussions/31766

This issue is super easy to reproduce, please help us figure it out -- Thanks!

[mosesoak]

Gatsby said they would add this to their docs to clear up confusion since StaticImage is not supported. https://github.com/gatsbyjs/gatsby/discussions/31766#discussioncomment-1309042

I also posted a hook that helps when using GatsbyImage, maybe we could talk about adding that solution to this addon to make storybook + gatsby integrations easier.

Closing for now but feel free to reach out to me if you're interested!

[angeloashmore]

Hey @mosesoak, indeed this addon does not handle StaticImage. gatsby-plugin-image, from my understanding, processes StaticImage images at bootstrap and runs a custom Babel plugin to inject the produced image data.

Since we have access to Webpack and Babel in Storybook, it's possible we could write a small plugin that at least allows <StaticImage> to render the given image. Any Sharp-related features would not be supported, like generating placeholders or resized images. It would be like your useImageData hook, but automatically applied to <StaticImage>.

Alternatively, we could run the same custom Babel plugin gatsby-plugin-image uses to inject the preprocessed image data from Gatsby. This is similar to how useStaticQuery works in Storybook.

I'm going to reopen this issue so we can track this as an enhancement to the addon. This is all open to discussion, of course!