diff --git a/.changes/api-encode-protocol-path.md b/.changes/api-encode-protocol-path.md
new file mode 100644
index 00000000000..22992adc008
--- /dev/null
+++ b/.changes/api-encode-protocol-path.md
@@ -0,0 +1,5 @@
+---
+"api": patch
+---
+
+Encode the file path in the `convertFileSrc` function.
diff --git a/tooling/api/src/tauri.ts b/tooling/api/src/tauri.ts
index 8b8382c0f88..1564a94d5a1 100644
--- a/tooling/api/src/tauri.ts
+++ b/tooling/api/src/tauri.ts
@@ -114,9 +114,10 @@ async function invoke<T>(cmd: string, args: InvokeArgs = {}): Promise<T> {
  * @return the URL that can be used as source on the webview.
  */
 function convertFileSrc(filePath: string, protocol = 'asset'): string {
+  const path = encodeURIComponent(filePath)
   return navigator.userAgent.includes('Windows')
-    ? `https://${protocol}.localhost/${filePath}`
-    : `${protocol}://${filePath}`
+    ? `https://${protocol}.localhost/${path}`
+    : `${protocol}://${path}`
 }
 
 export type { InvokeArgs }