Tauri + Leptos: Display image directly from disk

[TheBestTvarynka]

Hi,
I'm developing a desktop app using Leptos and Tauri. Currently, I want to display an image directly from the disk.

I found some solutions on the Internet:

• Is it possible to display image directly from disk using absolute path or something else?.
• file:// not allowed to load local resource.

But all of them use some JS framework/library (React, Vue) for the frontend. And they have the convertFileSrc function available.
I tried to make my alternative to convertFileSrc but failed 😓

So, my question is the following: How can I load an image from a disk?

UPD:

I searched for the convertFileSrc function in the source code and found out that there is nothing special about this function:

tauri/core/tauri/scripts/core.js

Lines 12 to 19 in 5878fb4

	Object.defineProperty(window.__TAURI_INTERNALS__, 'convertFileSrc', {
	value: function (filePath, protocol = 'asset') {
	const path = encodeURIComponent(filePath)
	return osName === 'windows' || osName === 'android'
	? `http://${protocol}.localhost/${path}`
	: `${protocol}://localhost/${path}`
	}
	})

I did the same in my project and got the following error:

Can someone give me a hint on how can I fix it?
And yes, I've edited my tauri.conf.json:

"security": {
  "csp": "default-src 'self'; img-src 'self' asset: http://asset.localhost"
},

and :

"protocol": {
  "asset": true,
  "assetScope": [
    "$APPCACHE/**",
    "$RESOURCE/**"
  ]
},

[TheBestTvarynka]

Nevermind. I'm kinda stupid. The C:\Users\pavlo.myroniuk\AppData\Roaming\com.tbt.totes\ folder is $APPDATA but not $APPCACHE or $RESOURCE. I changed tauri.conf.json and now it works.

🥲 🤪 😶‍🌫️