#Unable to Display Image Files from File System in <img> Tag

4 messages · Page 1 of 1 (latest)

eager latch
#

I'm having issues getting Tauri to display images from the file system in an <img> tag. I have this working in my Tauri v1 app but I can't get it to work in Tauri v2. What am I missing?

Error:

http://asset.localhost//Users/your_name_here/Downloads/test.jpg
Failed to load resource: A server with the specified hostname could not be found.

HTML:

<img src="http://asset.localhost//Users/your_name_here/Downloads/test.jpg">
#

tauri.conf.json:

{
  "$schema": "https://schema.tauri.app/config/2",
  "productName": "sandbox",
  "version": "1.0.0",
  "identifier": "com.your_domain_here.sandbox",
  "build": {
    "beforeBuildCommand": "deno task build",
    "beforeDevCommand": "deno task dev",
    "devUrl": "http://localhost:1420",
    "frontendDist": "../dist"
  },
  "app": {
    "withGlobalTauri": true,
    "windows": [
      {
        "title": "Sandbox",
        "width": 800,
        "height": 600
      }
    ],
        "security": {
            "csp": "default-src 'self' ipc: http://ipc.localhost; img-src 'self' asset: http://asset.localhost",
      "assetProtocol": {
        "enable": true,
        "scope": ["**/*"]
      }
        }
  },
  "bundle": {
    "active": true,
    "targets": "all",
    "icon": [
      "icons/32x32.png",
      "icons/128x128.png",
      "icons/[email protected]",
      "icons/icon.icns",
      "icons/icon.ico"
    ]
  }
}
#

cargo.toml:

[package]
name = "sandbox"
version = "1.0.0"
description = "Sandbox App"
authors = ["your_name_here"]
edition = "2021"

[lib]
name = "sandbox_lib"
crate-type = ["staticlib", "cdylib", "rlib"]

[build-dependencies]
tauri-build = { version = "2", features = [] }

[dependencies]
tauri = { version = "2", features = [ "protocol-asset"] }
tauri-plugin-opener = "2"
serde = { version = "1", features = ["derive"] }
serde_json = "1"
tauri-plugin-log = "2"
log = "0.4.25"
wide jewel
#

http://asset.localhost/ is only avail on windows and android. on other platforms it's asset://localhost - one of the reasons convertFileSrc() is a thing.