[bug] Assets in html are apparently broken

George3d6 commented 2 weeks ago

Describe the bug

Assets (in src/assets) behave in unusual where sometimes they work, for me, for example, when settings fonts:

src: url(./assets/fonts/ESAllianz-Light.otf) format("opentype");

But not when setting the source of an image node, e.g.: <img src="assets/icons/doc-icon.svg"></img>

Reproduction

Create the following index.html

echo '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z" fill="#ffffff" stroke="#000000" stroke-width="1.5"/>
  <path d="M14 2v6h6" fill="#ffffff" stroke="#000000" stroke-width="1.5"/>
  <line x1="8" y1="13" x2="16" y2="13" stroke="#000000" stroke-width="1.5"/>
  <line x1="8" y1="17" x2="16" y2="17" stroke="#000000" stroke-width="1.5"/>
  <line x1="8" y1="9" x2="10" y2="9" stroke="#000000" stroke-width="1.5"/>
</svg>' > assets/icons/doc-icon.webp

Then in src/index.html replace any scripts and have your body be:

  <body> 
    <div style="height: 50px; width: 50px; background-color: red;"><img src="assets/icons/doc-icon.svg"></img></div>
    <div id="root"></div>
  </body>

Result is

Expected behavior

I would expect files inside src/assets to behave consistently -- i.e. for the paths to work from anywhere, or at least to work from anywhere provided some function ala convertFileSrc is called to format the paths.

Note: I am reasonably certain this is not a security.csp or security.assetProtocol issue (but those should be shipping /w sane defaults anyway) Note: I am also almost certain this is not a "bug" in that "some big brain way exists to modify 3 config files and call the 2 anointed holy functions in order to make this specific behavior work" -- However having sane defaults (e.g. files in assets get bundled and are accessible at consistent URLs) seems like a very relevant behavior -- so this might be better suited as "feature request" as opposed to "bug"

Full `tauri info` output

[✔] Environment
    - OS: Mac OS 15.0.1 arm64 (X64)
    ✔ Xcode Command Line Tools: installed
    ✔ rustc: 1.81.0 (eeb90cda1 2024-09-04)
    ✔ cargo: 1.81.0 (2dbb1af80 2024-08-20)
    ✔ rustup: 1.27.1 (54dd3d00f 2024-04-24)
    ✔ Rust toolchain: stable-aarch64-apple-darwin (default)
    - node: 20.13.1
    - pnpm: 9.12.2
    - yarn: 1.22.22
    - npm: 10.5.2

[-] Packages
    - tauri 🦀: 2.0.6
    - tauri-build 🦀: 2.0.2
    - wry 🦀: 0.46.3
    - tao 🦀: 0.30.5
    - @tauri-apps/api : 2.0.3
    - @tauri-apps/cli : 2.0.5

[-] Plugins
    - tauri-plugin-dialog 🦀: 2.0.3
    - @tauri-apps/plugin-dialog : 2.0.1
    - tauri-plugin-shell 🦀: 2.0.2
    - @tauri-apps/plugin-shell : 2.0.1
    - tauri-plugin-fs 🦀: 2.0.3
    - @tauri-apps/plugin-fs : 2.0.1 (outdated, latest: 2.0.2)
    - tauri-plugin-log 🦀: 2.0.1
    - @tauri-apps/plugin-log : 2.0.0
    - tauri-plugin-store 🦀: 2.1.0
    - @tauri-apps/plugin-store : 2.1.0

[-] App
    - build-type: bundle
    - CSP: script-src 'self' https://api.lttlbrd.app https://*.posthog.com; default-src 'self' https://api.lttlbrd.app $RESOURCE/**; style-src 'self' 'unsafe-inline'; img-src 'self' data: asset: https://asset.localhost http://localhost:* https://api.lttlbrd.app $RESOURCE/**; media-src 'self' mediadevices: blob: data: https://api.lttlbrd.app $RESOURCE/**; connect-src 'self' mediadevices: https://api.lttlbrd.app https://*.posthog.com
    - frontendDist: ../dist
    - devUrl: http://localhost:1420/
    - framework: React
    - bundler: Vite

Stack trace

No response

Additional context

No response

FabianLars commented 2 weeks ago

I may be a bit dense, but could you upload your reproduction into a github repo? The default create-tauri-app project also imports images from src/assets/ in the index.html

George3d6 commented 2 weeks ago

Hmh, in that case I expect I did something wrong, if you're saying "in the default app this should have been enough".

Asset importing from react ended up working if I specified the path & used the esm6 import syntax so I assume this is me messing with the config in a way that caused the import from index.html to break (and might have to do with vite and not tauri itself)

So I will go ahead and close the issue

tauri-apps / tauri