[bug] Resource files cannot be accessed on Windows but works on MacOS

[vincent-lu]

Describe the bug

The files in resources folders can be accessed on MacOS but not on Windows.

This is the main part of the code:

<script setup>
import {onMounted, reactive} from "vue";
import {resolveResource} from "@tauri-apps/api/path";
import {convertFileSrc} from "@tauri-apps/api/tauri";

const state = reactive({
  image: "",
});

onMounted(async () => {
  const path = await resolveResource('resources');
  state.image = convertFileSrc(`${path}/image.jpg`);
});
</script>

<template>
  <div class="container">
    <img :src="state.image" alt="image">
  </div>
</template>

When I run pnpm i && pnpm tauri dev on MacOS, the app opens with a sample image shown. But on Windows the exact same code will show a broken image (the url actually points to the right path, but seems the app lacks permission to access it)

This seems to be very similar to https://github.com/tauri-apps/tauri/issues/6962 but I tried to set assetScope to "**/*" (instead of "**"), it still doesn't work on Windows.

Reproduction

git clone git@github.com:vincent-lu/demo.git
cd demo
pnpm i
pnpm tauri dev

Expected behavior

The jpeg image stored at ./src-tauri/resources/image.jpg should be shown as a web image on the frontend on both MacOS and Windows.

Full tauri info output

[✔] Environment
    - OS: Windows 10.0.19045 X64
    ✔ WebView2: 120.0.2210.121
    ✔ MSVC:
        - Visual Studio Build Tools 2019
        - Visual Studio Build Tools 2022
    ✔ rustc: 1.75.0 (82e1608df 2023-12-21)
    ✔ cargo: 1.75.0 (1d8b05cdd 2023-11-20)
    ✔ rustup: 1.25.1 (bb60b1e89 2022-07-12)
    ✔ Rust toolchain: stable-x86_64-pc-windows-msvc (default)
    - node: 20.11.0
    - pnpm: 8.14.1
    - npm: 10.2.4

[-] Packages
    - tauri [RUST]: 1.5.4
    - tauri-build [RUST]: 1.5.1
    - wry [RUST]: 0.24.7
    - tao [RUST]: 0.16.5
    - @tauri-apps/api [NPM]: 1.5.3
    - @tauri-apps/cli [NPM]: 1.5.9

[-] App
    - build-type: bundle
    - CSP: unset
    - distDir: ../dist
    - devPath: http://localhost:1420/
    - framework: Vue.js
    - bundler: Vite

Stack trace

No response

Additional context

No response

[FabianLars]

The issue here is that if you use resolveResource and convertFileSrc like this you'll end up with a url encoded path that mixed forward and backward slashes. I'm not sure if we consider this a bug or simply expected behavior, but you can workaround it really easily. This is how we intended the resolveResource api to be used (this would fix the issue here):

resolveResource("resources/image.jpg")

Alternative you can use path.resolve like

  const path = await resolveResource('resources');
  state.image = convertFileSrc(await resolve(`${path}/image.jpg`));

[vincent-lu]

Ah ok, that worked. Thanks @FabianLars. I always thought forward slashes (sort of) already work on Windows.