Title : Tauri + React: Image not displaying after saving in AppData folder
Hello everyone,
I’m working on a project using Tauri with React, and I’ve run into an issue with image handling.
I’m creating an images folder inside the AppData directory and copying uploaded images into that folder. I also store the image path in the SQLite database. Everything works fine during upload — the image is saved correctly, and the path is stored — but when I try to display the image later in my app, it doesn’t show up.
Here’s the function I’m using to add a product and save the image:
async function addProduct( file, productName, category, price, description ) { try { const database = await initDatabase(); const tokenExists = await exists("images", { baseDir: BaseDirectory.AppData, }); if (!tokenExists) { await mkdir("images", { baseDir: BaseDirectory.AppData, }); } const filename = await basename(file); const uniqueName = `${Date.now()}${filename}`; const destinationPath = `images/${uniqueName}`; await copyFile(file, destinationPath, { toPathBaseDir: BaseDirectory.AppData, }); await database.execute( "INSERT INTO product (productImage, productName, category, price, description) VALUES (?, ?, ?, ?, ?)", [destinationPath, productName, category, price, description] ); return { ok: true, message: "Product added successfully" }; } catch (error) { console.error("❌ Failed to add product:", error.message); throw error; } }
To display the image, I’m trying to load it like this:
<img src={`C:\\Users\\YourUser\\AppData\\Roaming\\com.product.app\\images\\${item.productImage}`} />
But the image is not rendering, and the console shows an error:
"Not allowed to load local resource"
What’s the correct way to show images stored in AppData in a Tauri + React application?
Is there a specific Tauri API or permission required to expose that image path to the frontend?
Any help would be appreciated