diff --git a/src/Umbraco.Web.UI.Client/package-lock.json b/src/Umbraco.Web.UI.Client/package-lock.json
index aa12882141..cf7b9d902f 100644
--- a/src/Umbraco.Web.UI.Client/package-lock.json
+++ b/src/Umbraco.Web.UI.Client/package-lock.json
@@ -42,6 +42,7 @@
 				"@typescript-eslint/parser": "^5.50.0",
 				"@web/dev-server-esbuild": "^0.3.3",
 				"@web/dev-server-import-maps": "^0.0.7",
+				"@web/dev-server-rollup": "^0.3.21",
 				"@web/test-runner": "^0.15.0",
 				"@web/test-runner-playwright": "^0.9.0",
 				"babel-loader": "^9.1.2",
@@ -63,6 +64,7 @@
 				"prettier": "2.8.3",
 				"rollup": "^3.10.0",
 				"rollup-plugin-esbuild": "^5.0.0",
+				"rollup-plugin-url": "^3.0.1",
 				"tiny-glob": "^0.2.9",
 				"typescript": "^4.9.5",
 				"vite": "^4.0.4",
@@ -23885,6 +23887,50 @@
 			"integrity": "sha512-fJg+1tiyEeS8figV+fPcPpm8WqJEflG3yPU0NOm5xMvrNkuiy7HzX/Ljng4Y0hAoiw4/3hQTCFYw+ub8+a2pRA==",
 			"dev": true
 		},
+		"node_modules/rollup-plugin-url": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/rollup-plugin-url/-/rollup-plugin-url-3.0.1.tgz",
+			"integrity": "sha512-fQVrxlW335snHfPqZ7a0JIkkYEIrLeFobpAxRMQnyv7xQeJOY1yOd84STIdCaLYPoGzwOq8waOdGipNH181kzg==",
+			"deprecated": "This module has been deprecated and is no longer maintained. Please use @rollup/plugin-url.",
+			"dev": true,
+			"dependencies": {
+				"mime": "^2.4.4",
+				"rollup-pluginutils": "^2.8.2"
+			},
+			"engines": {
+				"node": ">=10.0.0"
+			},
+			"peerDependencies": {
+				"rollup": ">=0.60.0"
+			}
+		},
+		"node_modules/rollup-plugin-url/node_modules/mime": {
+			"version": "2.6.0",
+			"resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
+			"integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==",
+			"dev": true,
+			"bin": {
+				"mime": "cli.js"
+			},
+			"engines": {
+				"node": ">=4.0.0"
+			}
+		},
+		"node_modules/rollup-pluginutils": {
+			"version": "2.8.2",
+			"resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
+			"integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==",
+			"dev": true,
+			"dependencies": {
+				"estree-walker": "^0.6.1"
+			}
+		},
+		"node_modules/rollup-pluginutils/node_modules/estree-walker": {
+			"version": "0.6.1",
+			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
+			"integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
+			"dev": true
+		},
 		"node_modules/router-slot": {
 			"version": "1.5.5",
 			"resolved": "https://registry.npmjs.org/router-slot/-/router-slot-1.5.5.tgz",
@@ -47166,6 +47212,41 @@
 				}
 			}
 		},
+		"rollup-plugin-url": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/rollup-plugin-url/-/rollup-plugin-url-3.0.1.tgz",
+			"integrity": "sha512-fQVrxlW335snHfPqZ7a0JIkkYEIrLeFobpAxRMQnyv7xQeJOY1yOd84STIdCaLYPoGzwOq8waOdGipNH181kzg==",
+			"dev": true,
+			"requires": {
+				"mime": "^2.4.4",
+				"rollup-pluginutils": "^2.8.2"
+			},
+			"dependencies": {
+				"mime": {
+					"version": "2.6.0",
+					"resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
+					"integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==",
+					"dev": true
+				}
+			}
+		},
+		"rollup-pluginutils": {
+			"version": "2.8.2",
+			"resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
+			"integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==",
+			"dev": true,
+			"requires": {
+				"estree-walker": "^0.6.1"
+			},
+			"dependencies": {
+				"estree-walker": {
+					"version": "0.6.1",
+					"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
+					"integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
+					"dev": true
+				}
+			}
+		},
 		"router-slot": {
 			"version": "1.5.5",
 			"resolved": "https://registry.npmjs.org/router-slot/-/router-slot-1.5.5.tgz",
diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json
index e294e1def2..0c2a2748d2 100644
--- a/src/Umbraco.Web.UI.Client/package.json
+++ b/src/Umbraco.Web.UI.Client/package.json
@@ -90,6 +90,7 @@
 		"@typescript-eslint/parser": "^5.50.0",
 		"@web/dev-server-esbuild": "^0.3.3",
 		"@web/dev-server-import-maps": "^0.0.7",
+		"@web/dev-server-rollup": "^0.3.21",
 		"@web/test-runner": "^0.15.0",
 		"@web/test-runner-playwright": "^0.9.0",
 		"babel-loader": "^9.1.2",
@@ -111,6 +112,7 @@
 		"prettier": "2.8.3",
 		"rollup": "^3.10.0",
 		"rollup-plugin-esbuild": "^5.0.0",
+		"rollup-plugin-url": "^3.0.1",
 		"tiny-glob": "^0.2.9",
 		"typescript": "^4.9.5",
 		"vite": "^4.0.4",
diff --git a/src/Umbraco.Web.UI.Client/src/installer/shared/layout/installer-layout.element.ts b/src/Umbraco.Web.UI.Client/src/installer/shared/layout/installer-layout.element.ts
index 94c36bbdd1..fb6817808e 100644
--- a/src/Umbraco.Web.UI.Client/src/installer/shared/layout/installer-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/installer/shared/layout/installer-layout.element.ts
@@ -1,4 +1,4 @@
-import {css, CSSResultGroup, html, LitElement, unsafeCSS} from 'lit';
+import { css, CSSResultGroup, html, LitElement, unsafeCSS } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import logoImg from '/umbraco_logomark_white.svg';
 import installerImg from '/installer.jpg';
diff --git a/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs b/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs
index c2af3f5141..8898a6faaf 100644
--- a/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs
+++ b/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs
@@ -1,11 +1,37 @@
 import { esbuildPlugin } from '@web/dev-server-esbuild';
 import { playwrightLauncher } from '@web/test-runner-playwright';
 import { importMapsPlugin } from '@web/dev-server-import-maps';
+import rollupUrl from 'rollup-plugin-url';
+import { fromRollup } from '@web/dev-server-rollup';
 
+const url = fromRollup(rollupUrl);
+
+/** @type {import('@web/dev-server').DevServerConfig} */
 export default {
 	nodeResolve: true,
-	files: ['src/**/*.test.ts', 'apps/**/*.test.ts', 'libs/**/*.test.ts'],
+	files: ['src/**/*.test.ts', 'libs/**/*.test.ts'],
+	mimeTypes: {
+		'./public/**/*': 'js'
+	},
 	plugins: [
+		{
+			name: 'resolve-umbraco-and-vite-imports',
+			// Rewrite Vite's root imports to the public folder
+			transformImport(args) {
+				if (args.source.match(/^\/.*?\.(png|gif|jpg|jpeg|svg)$/is)) {
+					return `/public${args.source}`;
+				}
+			},
+
+			// Serve Umbraco's API imports (msw does not work in web-test-runner)
+			serve(context) {
+				if (context.path.startsWith('/umbraco/management/api')) {
+					return '';
+				}
+			}
+		},
+		// Serve images from the public folder as JS modules
+		url({ include: ['public/**/*'] }),
 		esbuildPlugin({ ts: true, target: 'auto', json: true }),
 		importMapsPlugin({
 			inject: {