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

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

@@ -48,3 +48,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 --cwd=./public --parents '**/*' '../assets/blog'",
     "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

@@ -13,6 +13,7 @@ import { getBrowsersList } from "./browserslist"
 import ESLintPlugin from "eslint-webpack-plugin"
 import { cpuCoreCount } from "gatsby-core-utils"
 import { GatsbyWebpackStatsExtractor } from "./gatsby-webpack-stats-extractor"
+import { getPublicPath } from "./get-public-path"
 import {
   GatsbyWebpackVirtualModules,
   VIRTUAL_MODULES_BASE_PATH,
@@ -183,6 +184,9 @@ export const createWebpackUtils = (
 
   const isSSR = stage.includes(`html`)
   const { config } = store.getState()
+  const { assetPrefix, pathPrefix } = config
+
+  const publicPath = getPublicPath({ assetPrefix, pathPrefix, ...program })
 
   const makeExternalOnly =
     (original: RuleFactory) =>
@@ -216,7 +220,7 @@ export const createWebpackUtils = (
       ROUTES_DIRECTORY,
       `public`
     )
-    fileLoaderCommonOptions.publicPath = `/`
+    fileLoaderCommonOptions.publicPath = publicPath || `/`
   }
 
   const loaders: ILoaderUtils = {