Is it possible to display image directly from disk using absolute path or something else?

[HuakunShen]

I want to display image from disk. I know that we can read the image file as binary with fs api and convert to base64 then display it.

But this is inefficient if the image is large or there are many images. Is there a way to display image direct from disk like this

<img src="/Users/user/Downloads/dog.jpeg" alt="">

(this didn't work for me, it looks for image at http://localhost:8080/Users/user/Downloads/dog.jpeg and gives a 404)

Or some other more efficient methods?

[FabianLars]

The "tauri way" would be to use the asset protocol via https://tauri.app/v1/api/js/tauri/#convertfilesrc. It doesn't use the same IPC the fs api uses and should be much faster.

[Wind-Explorer]

Here is my successful attempt at doing so.

It is highly likely your situation has differences from mine but I hope somewhere in my demonstration you may find inspiration.

My program download a list of images from the web into app's cache folder and displays them in the interface.
I am using Vue.js for my project, but steps should be similar for React.

My images are located in one of the tauri-approved local disk directories.

Here are some key entries present in my tauri.conf.json:

"tauri": {
  "allowlist": {
    "protocol": {
      "asset": true,
      "assetScope": [
        // Include needed directory identifiers here
        "$APPCACHE/**",
        "$RESOURCE/**"
      ]
    }
  }
  "security": {
    "csp": "default-src 'self'; img-src 'self' asset: https://asset.localhost"
  }
}

Next I need the path to the image:

// Gets a list of images in cache dir
const images_in_cache = await readDir(
  'images',
  {
    dir: BaseDirectory.AppCache,
    recursive: false
  }
);

I initialize a list of images:

image_list= [];

Then the read files are being converted into asset paths:

images_in_cache.forEach(async (entry) => {
  image_list.push(convertFileSrc(entry.path)); // convertFileSrc() used here
});

Now the paths (strings) in images_list are in the correct asset format that my HTML can use to display images.

<img v-bind:src="image_list[image_index]"/>

[feelgeel]

here is my code i am trying to read one img but i like ur code when it comes to read imgs from dir

[Wind-Explorer]

You are trying to read the image as a text file, which is not correct. You can just rely on the BaseDirectory.Desktop to get the absolute path which you can apply convertFileSrc() on or use my method of getting a list of images (for your case only one) and use the result of that.

[feelgeel]

thank u very much wind-explorer

[Wind-Explorer]

you're welcome i'l take your suggestion and start a youtube channel for coding someday 😄

[Wind-Explorer]

This is not really an answer, but just for your information. <img src="/Users/user/Downloads/dog.jpeg" alt=""> didn't work because it assumes you are referring to a file in the project's working directory. You can workaround this by specifying the URL's scheme. That means <img src="file:///Users/user/Downloads/dog.jpeg" alt=""> should be what you are looking for.

However it still wont work because it seems that Tauri (or any other frameworks really) prevents your app from loading images outside of it's working directory. I've been trying to do similar things but have been getting the error "Not allowed to load local resource" on the file.

[FabianLars]

Did you try the asset: protocol i linked above? That's literally Tauri's equivalent to the file: protocol and was initially designed for example that use case (img tags etc)

[Wind-Explorer]

I did consider the option, however error occurred still, but this time its "Failed to load resource: unsupported URL", so..
(specific url being used: asset://localhost/%2FUsers%2Fwind%2FLibrary%2FCaches%2Fcom.app.tauri%2Fimages%2F109520274.png)

[AClon314]

PS: also check, config is written in tauri.json.config, not compabilities/xxx.json in tauri v2(beta)

[HA55EHH]

PS: also check, config is written in tauri.json.config, not compabilities/xxx.json in tauri v2(beta)

You legend! I just stalked one of your projects to find the exact bit I needed...

"security": {
      "assetProtocol": {
        "enable": true,
        "scope": ["*/**"]
      },

[ozws]

Thanks @FabianLars, @Wind-Explorer! Got things working, pulling from the Public directory (macOS).

Building a Vue/Pinia app for home movie server and the same searchable/filterable 'database' is on two computers. DB is file-based, with the movie posters next to that. All i'll have to do is create a new json file for adding another movie, along with the poster. Don't have to update the app every time. Nice!