using-gatsby-plugin-image fails to download images that don't have a file extension

[frith77]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

following https://www.gatsbyjs.com/docs/how-to/images-and-media/using-gatsby-plugin-image/#static-images

I was unable to download and generated webp files

Reproduction Link

https://github.com/badape-net/avalon-gatsby-web

Steps to Reproduce

the code i used is

const image = getImage(getAssetURL(page.banner.id))

        <Container p={4} bg="muted" p={4} sx={{ flex: '1 1 auto' }}>
          <div dangerouslySetInnerHTML={{ __html: page.content }} />
          <StaticImage src="https://upload.wikimedia.org/wikipedia/commons/b/bc/Juvenile_Ragdoll.jpg" alt="A kitten" />
          <StaticImage src="https://placekitten.com/800/600" alt="A kitten" />
          <StaticImage src="https://directus.badape.online/assets/21652de5-6e1b-4226-8a07-b38267256e69" alt="A kitten" layout="fixed" />
          <img src={getAssetURL(page.banner.id)} alt="" loading="lazy" />
          <GatsbyImage image={image} alt={page.banner.id} />
        </Container>

image is not very important however it does generate the image from the instance of directus used above, all i've done is copy the example in the documentation

Expected Result

I was hoping to get lots of nice downloaded transcoded images, sadly all i got was:

http://localhost:8000/static/69d500d9d1a03171eb9b136846e51805/1e5ef/Juvenile_Ragdoll.webp

Actual Result

from the console using npm run develop

warn [gatsby-plugin-image] Could not read image data file "D:\git\avalon-gatsby-web\.cache\caches\gatsby-plugin-image\1134640067.json".
This may mean that the images in "D:\git\avalon-gatsby-web\src\pages\index.js" were not processed.
Please ensure that your gatsby version is at least 2.24.78.
warn [gatsby-plugin-image] No data found for image "https://placekitten.com/800/600"
warn [gatsby-plugin-image] Could not read image data file "D:\git\avalon-gatsby-web\.cache\caches\gatsby-plugin-image\3083467818.json".
This may mean that the images in "D:\git\avalon-gatsby-web\src\pages\index.js" were not processed.
Please ensure that your gatsby version is at least 2.24.78.
warn [gatsby-plugin-image] No data found for image "https://directus.badape.online/assets/21652de5-6e1b-4226-8a07-b38267256e69"

and in the browser

Warning: Failed prop type: The prop `image` is marked as required in `GatsbyImage`, but its value is `undefined`.
    at it (webpack-internal:///./node_modules/gatsby-plugin-image/dist/index.browser-44f85d35.js:855:10)
    at IndexPage (webpack-internal:///./src/pages/index.js:24:19)
    at PageRenderer (webpack-internal:///./.cache/page-renderer.js:23:29)
    at PageQueryStore (webpack-internal:///./.cache/query-result-store.js:39:30)
    at RouteHandler
    at div
    at FocusHandlerImpl (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:359:5)
    at FocusHandler (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:330:19)
    at RouterImpl (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:235:5)
    at Location (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:64:23)
    at Router
    at ScrollHandler (webpack-internal:///./node_modules/gatsby-react-router-scroll/scroll-handler.js:36:35)
    at RouteUpdates (webpack-internal:///./.cache/navigation.js:294:32)
    at EnsureResources (webpack-internal:///./.cache/ensure-resources.js:22:30)
    at LocationHandler (webpack-internal:///./.cache/root.js:67:29)
    at LocationProvider (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:84:5)
    at Location (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:64:23)
    at Root
    at dt (webpack-internal:///./node_modules/gatsby-plugin-image/dist/index.browser-44f85d35.js:896:13)
    at MDXProvider (webpack-internal:///./node_modules/@mdx-js/react/lib/index.js:96:23)
    at MDXProvider (webpack-internal:///./node_modules/@theme-ui/mdx/dist/theme-ui-mdx.esm.js:93:3)
    at __ThemeUIInternalBaseThemeProvider (webpack-internal:///./node_modules/@theme-ui/core/dist/theme-ui-core.esm.js:72:3)
    at TopLevelColorModeProvider (webpack-internal:///./node_modules/@theme-ui/color-modes/dist/theme-ui-color-modes.esm.js:164:3)
    at ColorModeProvider (webpack-internal:///./node_modules/@theme-ui/color-modes/dist/theme-ui-color-modes.esm.js:403:3)
    at __ThemeUIInternalBaseThemeProvider (webpack-internal:///./node_modules/@theme-ui/core/dist/theme-ui-core.esm.js:72:3)
    at ThemeProvider (webpack-internal:///./node_modules/@theme-ui/core/dist/theme-ui-core.esm.js:81:3)
    at ThemeProvider (webpack-internal:///./node_modules/@theme-ui/theme-provider/dist/theme-ui-theme-provider.esm.js:47:3)
    at Root (webpack-internal:///./node_modules/gatsby-plugin-theme-ui/src/provider.js:29:23)
    at WrapRootElement (webpack-internal:///./node_modules/gatsby-plugin-theme-ui/src/provider.js:58:23)
    at StaticQueryStore (webpack-internal:///./.cache/query-result-store.js:158:32)
    at ErrorBoundary (webpack-internal:///./.cache/fast-refresh-overlay/components/error-boundary.js:24:35)
    at DevOverlay (webpack-internal:///./.cache/fast-refresh-overlay/index.js:125:23)
    at RootWrappedWithOverlayAndProvider
    at App (webpack-internal:///./.cache/app.js:209:68)

i believe getImage is failing to download the image

Environment

System:
    OS: Windows 10 10.0.19044
    CPU: (32) x64 AMD Ryzen 9 5950X 16-Core Processor       
  Binaries:
    Node: 16.13.1 - C:\Program Files\nodejs\node.EXE        
    npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (98.0.1108.56)
  npmPackages:
    gatsby: ^4.7.2 => 4.8.0
    gatsby-image: ^3.11.0 => 3.11.0
    gatsby-plugin-image: ^2.8.0 => 2.8.0
    gatsby-plugin-sharp: ^4.8.0 => 4.8.0
    gatsby-plugin-theme-ui: ^0.13.1 => 0.13.1
    gatsby-transformer-remark: ^5.8.0 => 5.8.0
    gatsby-transformer-sharp: ^4.8.0 => 4.8.0
  npmGlobalPackages:
    gatsby-cli: 4.8.0

Config Flags

No response

[tyhopp]

Hi @frith77!

Thanks for reporting this. I cloned your project and had a look, seems like you're passing a string to the getImage helper function, which expects a FileNode or GatsbyImageData type.

I tried adjusting the query to

banner {
  imageFile {
    childImageSharp {
      gatsbyImageData(width: 200)
    }
  }
}

but banner returns null. I don't have access to your CMS so couldn't go further, but thought I'd include this in case it's useful to you when debugging.

[frith77]

Hi @tyhopp

Thanks for getting back to me, I assume that directus must support values compatible with imageFile, not sure what they are, however the documentation for directus is here https://docs.directus.io/reference/files/

the helper function is just generating the url to the image
return${process.env.GATSBY_DIRECTUS_URL}/assets/${id};
so i could modify that to create a GatsbyImageData object

however, the example
<StaticImage src="https://placekitten.com/800/600" alt="A kitten" />
still returns the error, so I've probably got two problems here

[tyhopp]

Hi @frith77, I was able to reproduce the other image fetch request issue you mentioned for <StaticImage src="https://placekitten.com/800/600" alt="A kitten" />.

If you're interested in seeing the difference as well, what I did was force the resolution of gatsby-core-utils in package.json to the prior release since there were some improvements shipped in the current release that may be related to this issue:

"resolutions": {
   "gatsby-core-utils": "3.7.0"
 }

[juliobarbagallo]

@tyhopp Hi, thanks for helping on this. Following the tutorial I got the same. But I added "resolutions" to my package.json and still the issue, images are not rendered. It works if the image came from local directory src="../images/bla.jfif" but nor from remote url.

[LekoArts]

This should be fixed with #34930 (comment)

[juliobarbagallo]

Yes, it does! Thank you very much @LekoArts . By the way, what you do is awesome. Thanks for sharing!

[IzzyDevs]

I am having this issue with gatsby 5.3.1
Using images with or without an extension, for both local and hosted image URLs.
I have been following the tutorial on the gatsby website and can't get past part 3.

I noticed I do not experience the error when I run 'gatsby develop' from macOS terminal, but if I run it from within the terminal in VSCode then images will not display. Leaving this here for anyone who might happen across this thread.

@LekoArts
Should I be logging this as a bug? Do we know why this is happening?

[dmc2015]

@IzzyDevs Hopefully you got around this. I was going through the tut also.
It seems like I just needed to stop and start the server after installing the plugins.
Also running in vscode was fine for me.