fix(gatsby-plugin-image): Normalize filename for correct hashing (#37262) (#37263)

* initial

* add peace of mind

(cherry picked from commit 397fa3f)

Co-authored-by: Lennart <lekoarts@gmail.com>

Author: gatsbybot

packages/gatsby-plugin-image/src/babel-plugin-parse-static-images.ts

@@ -50,7 +50,9 @@ export default function attrs({
         }
 
         // Adding the filename to the hashing, like in "extractStaticImageProps" function
-        props.filename = state.filename
+        if (state.filename) {
+          props.filename = slash(state.filename)
+        }
         const hash = hashOptions(props)
 
         const cacheDir = (this.opts as Record<string, string>)?.cacheDir

packages/gatsby-plugin-image/src/node-apis/parser.ts

@@ -3,6 +3,7 @@ import { NodePath } from "@babel/core"
 import { JSXOpeningElement } from "@babel/types"
 import { parse, ParserOptions } from "@babel/parser"
 import babel from "@babel/core"
+import { slash } from "gatsby-core-utils"
 import { evaluateImageAttributes, hashOptions } from "../babel-helpers"
 import { IStaticImageProps } from "../components/static-image.server"
 
@@ -96,7 +97,8 @@ export const extractStaticImageProps = (
       ) as unknown as IStaticImageProps
       // When the image props are the same for multiple StaticImage but they are in different locations
       // the hash will be the same then. We need to make sure that the hash is unique.
-      image.filename = filename
+      // The filename should already be normalized but better safe than sorry.
+      image.filename = slash(filename)
 
       images.set(hashOptions(image), image)
     },