Different image behavior in cloud preview


I have a site setup on Gatsby cloud, where we also use Gatsby Cloud's Preview feature. As I understand it, from for example this answer: Prismic Previews Render Gatsby Images Differently - #2 by angeloashmore, the preview feature should run all GraphQL queries the same as during a regular build.

However, in the preview-version of the site, many images doesn't blur up, they just stay blurred, as you can see in these links:

Regular build


I'm really at a loss for what might be causing it and would appreciate any help figuring this out!

I believe this is happening for the same reason that Angelo explained before, When in a preview session, gatsbyImageData is generated by gatsby-plugin-prismic-previews . This happens in the browser at runtime. As a result, it does not have access to GraphQL or any of your gatsbyImageData arguments. It can only simulate how the GraphQL server works. The plugin returns an object matching gatsby-plugin-image 's defaults. I'd suggest you take a look at GatsbyImage's docs.