[bug] Tauri can't load image

wineTGH commented 11 months ago

Describe the bug

I'm trying to load image from users directory. Main idea, that user creates directory with certain data and program shows it in cards. I'm using svelte + tauri for this. Everything works except images. Here is code:

<script lang="ts">
    import Card from '$lib/components/Card/Card.svelte';
    import { getInstructionsList, type Instruction } from '$lib/instructions';
    import { onMount } from 'svelte';
    import { convertFileSrc } from '@tauri-apps/api/tauri';

    let data: Array<Instruction> = [];

    onMount(async () => {
        data = await getInstructionsList();
    })

</script>

<section class="container mx-auto p-9">
    <h1 class="text-lg font-bold mb-8">Инструкции</h1> 
        <div class="grid gap-8 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-3">
            {#each data as entry}
                <Card let:Body let:Footer>
                    <Body let:Image let:Title let:Description>
                        <Image src={convertFileSrc(entry.thumbnail)} />
                        <Title>
                            {entry.name}
                        </Title>
                        <Description>
                            {entry.description}
                        </Description>
                    </Body>

                    <Footer let:Button>
                        <Button>Информация</Button>
                    </Footer>
                </Card>
            {:else}
                <p>Loading...</p>
            {/each}
        </div>
</section>

My Tauri config. As documentation said, I added csp and following answer on stackoverflow added protocol to allow list.

...
  "tauri": {
    "allowlist": {
      "all": true,
      "fs": {
        "all": true,
        "readFile": true,
        "writeFile": true,
        "readDir": true,
        "createDir": true,
        "exists": true,
        "scope": [
         "$APPLOCALDATA/instructions/**",
         "$APPLOCALDATA/instructions/*",
         "$APPLOCALDATA/**",
         "$APPLOCALDATA/*",
         "$APPLOCALDATA/",
         "$APPLOCALDATA"
        ]
      },
      "protocol": {
        "all": true,
        "asset": true,
        "assetScope": ["**"]
      }
    },
    ...
    "security": {
      "csp": "default-src 'self'; img-src 'self' asset: https://asset.localhost"
    }
...
  }

Reproduction

No response

Expected behavior

No response

Platform and versions

[✔] Environment
    - OS: Debian 12 X64
    ✔ webkit2gtk-4.0: 2.40.5
    ✔ rsvg2: 2.54.7
    ✔ rustc: 1.72.1 (d5c2e9c34 2023-09-13)
    ✔ Cargo: 1.72.1 (103a7ff2e 2023-08-15)
    ✔ rustup: 1.26.0 (5af9b9484 2023-04-05)
    ✔ Rust toolchain: stable-x86_64-unknown-linux-gnu (environment override by RUSTUP_TOOLCHAIN)
    - node: 18.13.0
    - npm: 9.2.0

[-] Packages
    - tauri [RUST]: 1.4.1
    - tauri-build [RUST]: 1.4.0
    - wry [RUST]: 0.24.4
    - tao [RUST]: 0.16.2
    - @tauri-apps/api [NPM]: 1.5.0
    - @tauri-apps/cli [NPM]: 1.4.0 (outdated, latest: 1.5.0)

[-] App
    - build-type: bundle
    - CSP: default-src 'self'; img-src 'self' asset: https://asset.localhost
    - distDir: ../build
    - devPath: http://localhost:5173/
    - framework: Svelte
    - bundler: Vite

Stack trace

After running program i got TypeError: window.__TAURI__.convertFileSrc is not a function. (In 'window.__TAURI__.convertFileSrc(e2, r)', 'window.__TAURI__.convertFileSrc' is undefined):

Additional context

No response

Layendan commented 11 months ago

I am also getting this error.

It worked earlier in the week, and it broke after I installed MacOS 17. Which makes me guess that the new safari version is breaking convertFileSrc.

pewsheen commented 10 months ago

Looks like there is a version mismatch in your package

[-] Packages
    - tauri [RUST]: 1.4.1 <----
    - tauri-build [RUST]: 1.4.0 <----
    - wry [RUST]: 0.24.4
    - tao [RUST]: 0.16.2
    - @tauri-apps/api [NPM]: 1.5.0 <---- 
    - @tauri-apps/cli [NPM]: 1.4.0 (outdated, latest: 1.5.0). <---

Could you try updating those Tauri versions in package.json and src-tauri/Cargo.tomlto 1.5.0 and see if the problem exists?

Layendan commented 10 months ago

Can confirm, updating rust to 1.5.0 fixes it, but I tried downgrading js api back to 1.4.0 and for some reason it did not work.

pewsheen commented 10 months ago

Can confirm, updating rust to 1.5.0 fixes it, but I tried downgrading js api back to 1.4.0 and for some reason it did not work.

Could you provide your package info via executing command pnpm tauri info?

Layendan commented 10 months ago

Nevermind, I realized I was downgrading cli instead of api 🤦 . Everything works...

tauri-apps / tauri