Search code examples
htmlnode.jssveltedesktoptauri

Tauri can't load image. TypeError: window.__TAURI__.convertFileSrc is not a function

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"
    }
...
  }

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

Solution

  • I encountered the same problem, and by aligning the version in package.json and src-tauri/Cargo.toml I solved it.

    Now my package.json is like

    {
  "dependencies": {
    "@tauri-apps/api": "^1.5.0"
  },
  "devDependencies": {
    "@tauri-apps/cli": "^1.5.1"
  }
}

    and my Cargo.toml

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

[dependencies]
tauri = { version = "1.5", features = [ "protocol-asset", "shell-sidecar", "shell-execute", "path-all", "dialog-open", "shell-open"] }

    After saving these two files and run pnpm tauri dev it will recompile and fix the problem.