diff --git a/e2e-tests/path-prefix/cypress/integration/asset-prefix.js b/e2e-tests/path-prefix/cypress/integration/asset-prefix.js
index 866246512aba6..324e00de32fd9 100644
--- a/e2e-tests/path-prefix/cypress/integration/asset-prefix.js
+++ b/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`)
+  })
+})
diff --git a/e2e-tests/path-prefix/cypress/integration/path-prefix.js b/e2e-tests/path-prefix/cypress/integration/path-prefix.js
index 690a1008bbb56..b0dcea9507fd8 100644
--- a/e2e-tests/path-prefix/cypress/integration/path-prefix.js
+++ b/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))
+  })
+})
diff --git a/e2e-tests/path-prefix/package.json b/e2e-tests/path-prefix/package.json
index 67e7b3ec28dbf..aab4f152220e8 100644
--- a/e2e-tests/path-prefix/package.json
+++ b/e2e-tests/path-prefix/package.json
@@ -23,6 +23,7 @@
   ],
   "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",
@@ -30,6 +31,7 @@
     "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",
diff --git a/e2e-tests/path-prefix/src/pages/file-loader.js b/e2e-tests/path-prefix/src/pages/file-loader.js
new file mode 100644
index 0000000000000..669feb5fe7b59
--- /dev/null
+++ b/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" />
+}
diff --git a/packages/gatsby/src/utils/webpack-utils.ts b/packages/gatsby/src/utils/webpack-utils.ts
index ec211482d498b..076f914028db9 100644
--- a/packages/gatsby/src/utils/webpack-utils.ts
+++ b/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 = {