diff --git a/templates/base/head.tmpl b/templates/base/head.tmpl
index f0f3885203..6a6a784937 100644
--- a/templates/base/head.tmpl
+++ b/templates/base/head.tmpl
@@ -84,7 +84,11 @@
         for the JavaScript code in this page.
 	*/`}}
 	</script>
-
+	<script>
+		window.config = {
+			StaticUrlPrefix: '{{StaticUrlPrefix}}'
+		}
+	</script>
 	<link rel="shortcut icon" href="{{StaticUrlPrefix}}/img/favicon.png" />
 	<link rel="mask-icon" href="{{StaticUrlPrefix}}/img/gitea-safari.svg" color="#609926">
 	<link rel="preload" href="{{StaticUrlPrefix}}/vendor/assets/font-awesome/css/font-awesome.min.css" as="style" onload="this.rel='stylesheet'">
diff --git a/web_src/js/publicPath.js b/web_src/js/publicPath.js
index 5d277e442a..4c683e175f 100644
--- a/web_src/js/publicPath.js
+++ b/web_src/js/publicPath.js
@@ -1,8 +1,10 @@
-/* This sets up webpack's chunk loading to load resources from the same
-  directory where it loaded index.js from. This file must be imported
-  before any lazy-loading is being attempted. */
+// This sets up the URL prefix used in webpack's chunk loading.
+// This file must be imported before any lazy-loading is being attempted.
+const { StaticUrlPrefix } = window.config;
 
-if (document.currentScript && document.currentScript.src) {
+if (StaticUrlPrefix) {
+  __webpack_public_path__ = StaticUrlPrefix.endsWith('/') ? StaticUrlPrefix : `${StaticUrlPrefix}/`;
+} else if (document.currentScript && document.currentScript.src) {
   const url = new URL(document.currentScript.src);
   __webpack_public_path__ = `${url.pathname.replace(/\/[^/]*$/, '')}/`;
 } else {