fixed image preview by replacing localfile:// with dataURL loader and adding read-file-dataurl IPC handler

electron/main/index.ts

@@ -16,6 +16,7 @@ import { copyBrowserData } from './copy'
 import { findAvailablePort } from './init'
 import kill from 'tree-kill';
 import { zipFolder } from './utils/log'
+import mime from "mime";
 import axios from 'axios';
 import FormData from 'form-data';
 import { checkAndInstallDepsOnUpdate, PromiseReturnType, getInstallationStatus } from './install-deps'
@@ -398,6 +399,12 @@ function registerIpcHandlers() {
     }
   });
 
+  ipcMain.handle("read-file-dataurl", async (event, filePath) => {
+  const file = fs.readFileSync(filePath);
+  const mimeType = mime.getType(path.extname(filePath)) || "application/octet-stream";
+  return `data:${mimeType};base64,${file.toString("base64")}`;
+});
+
   // ==================== log export handler ====================
   ipcMain.handle('export-log', async () => {
     try {

electron/preload/index.ts

@@ -1,6 +1,8 @@
 import { ipcRenderer, contextBridge } from 'electron'
 
 
+
+
 contextBridge.exposeInMainWorld('ipcRenderer', {
   on(...args: Parameters<typeof ipcRenderer.on>) {
     const [channel, listener] = args
@@ -59,6 +61,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
   executeCommand: (command: string,email:string) => ipcRenderer.invoke('execute-command', command,email),
   // file operations
   readFile: (filePath: string) => ipcRenderer.invoke('read-file', filePath),
+  readFileAsDataUrl: (path : string) => ipcRenderer.invoke("read-file-dataurl", path),
   deleteFolder: (email: string) => ipcRenderer.invoke('delete-folder', email),
   getMcpConfigPath: (email: string) => ipcRenderer.invoke('get-mcp-config-path', email),
   // install dependencies related API

src/components/Folder/index.tsx

@@ -575,18 +575,7 @@ export default function Folder({ data }: { data?: Agent }) {
 										"svg",
 								  ].includes(selectedFile.type.toLowerCase()) ? (
 									<div className="flex items-center justify-center h-full">
-										<img
-											src={
-												selectedFile.isRemote
-													? "localfile://" +
-													  encodeURIComponent(selectedFile.content as string)
-													: `localfile://${encodeURIComponent(
-															selectedFile.path
-													  )}`
-											}
-											alt={selectedFile.name}
-											className="max-w-full max-h-full object-contain"
-										/>
+										<ImageLoader selectedFile={selectedFile} />
 									</div>
 								) : (
 									<pre className="text-sm text-zinc-700 font-mono whitespace-pre-wrap break-words overflow-x-auto">
@@ -617,3 +606,26 @@ export default function Folder({ data }: { data?: Agent }) {
 		</div>
 	);
 }
+
+function ImageLoader({ selectedFile }: { selectedFile: FileInfo }) {
+    const [src, setSrc] = useState("");
+
+    useEffect(() => {
+        const filePath = selectedFile.isRemote
+            ? (selectedFile.content as string)
+            : selectedFile.path;
+
+        window.electronAPI
+            .readFileAsDataUrl(filePath)
+            .then(setSrc)
+            .catch((err: any) => console.error("Image load error:", err));
+    }, [selectedFile]);
+
+    return (
+        <img
+            src={src}
+            alt={selectedFile.name}
+            className="max-w-full max-h-full object-contain"
+        />
+    );
+}