fix(gatsby): Restore asset, path prefix for file-loader handled files (…

…#37429) (#37430)

Co-authored-by: Ty Hopp <tyhopp@users.noreply.github.com>

e2e-tests/path-prefix/cypress/integration/asset-prefix.js

@@ -77,3 +77,13 @@ describe(`assetPrefix`, () => {
     })
   })
 })
+
+describe(`assetPrefix with assets handled by file-loader`, () => {
+  beforeEach(() => {
+    cy.visit(`/file-loader/`).waitForRouteChange()
+  })
+
+  it(`prefixes an asset`, () => {
+    assetPrefixMatcher(cy.getTestElement(`file-loader-image`), `src`)
+  })
+})

e2e-tests/path-prefix/cypress/integration/path-prefix.js

@@ -98,3 +98,15 @@ describe(`Production pathPrefix`, () => {
     cy.getTestElement(`server-data`).contains(`foo`)
   })
 })
+
+describe(`pathPrefix with assets handled by file-loader`, () => {
+  beforeEach(() => {
+    cy.visit(`/file-loader/`).waitForRouteChange()
+  })
+
+  it(`prefixes an asset`, () => {
+    cy.getTestElement(`file-loader-image`)
+      .invoke(`attr`, `src`)
+      .should(`include`, withTrailingSlash(pathPrefix))
+  })
+})

e2e-tests/path-prefix/package.json

@@ -23,13 +23,15 @@
   ],
   "license": "MIT",
   "scripts": {
+    "clean": "gatsby clean",
     "prebuild": "del-cli -f assets && make-dir assets/blog",
     "build": "cross-env CYPRESS_SUPPORT=y gatsby build --prefix-paths",
     "postbuild": "cpy . '../assets/blog' --cwd=./public",
     "develop": "gatsby develop",
     "format": "prettier --write '**/*.js'",
     "test": "npm run build && npm run start-server-and-test",
     "start-server-and-test": "start-server-and-test serve \"http://localhost:9000/blog/|http://localhost:9001/blog/\" cy:run",
+    "start-server-and-test:locally": "start-server-and-test serve \"http://localhost:9000/blog/|http://localhost:9001/blog/\" cy:open",
     "serve": "npm-run-all --parallel serve:*",
     "serve:site": "gatsby serve --prefix-paths",
     "serve:assets": "node scripts/serve.js",

e2e-tests/path-prefix/src/pages/file-loader.js

@@ -0,0 +1,8 @@
+import * as React from "react"
+
+// Test files that are handled by file-loader
+import logo from "../images/citrus-fruits.jpg"
+
+export default function FileLoaderPage() {
+  return <img src={logo} alt="Citrus fruits" data-testid="file-loader-image" />
+}

packages/gatsby/src/utils/webpack-utils.ts

@@ -220,7 +220,7 @@ export const createWebpackUtils = (
       ROUTES_DIRECTORY,
       `public`
     )
-    fileLoaderCommonOptions.publicPath = `/`
+    fileLoaderCommonOptions.publicPath = publicPath || `/`
   }
 
   const loaders: ILoaderUtils = {