Tauri无法加载图片：TypeError: window.__TAURI__.convertFileSrc不是函数

我用Svelte + Tauri开发程序，核心功能是加载用户目录中的图片并在卡片中展示，其余功能正常，但图片加载失败，控制台报错：

TypeError: window.__TAURI__.convertFileSrc is not a function. (In 'window.__TAURI__.convertFileSrc(e2, r)', 'window.__TAURI__.convertFileSrc' is undefined)

控制台错误截图：

相关代码 #

Svelte代码

<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>

Tauri配置（tauri.conf.json）

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

解决方案 #

这个错误核心是Tauri版本差异导致convertFileSrc的API位置或配置要求变化，按以下步骤修复：

1. 修正convertFileSrc导入路径

   • 若使用Tauri 2.x，该API已从@tauri-apps/api/tauri迁移至@tauri-apps/api/fs，修改导入语句：

     import { convertFileSrc } from '@tauri-apps/api/fs';
     

   • 若使用Tauri 1.x，确认已安装@tauri-apps/api依赖，若未安装则执行：

     npm install @tauri-apps/api
     

2. 更新CSP配置
   确保CSP的img-src包含Tauri所需协议，修改tauri.conf.json的security部分：

   "security": {
     "csp": "default-src 'self'; img-src 'self' asset: https://asset.localhost tauri:"
   }
   

3. 验证文件路径
   确认entry.thumbnail是合法的本地绝对路径，且位于你配置的$APPLOCALDATA权限范围内（当前配置已覆盖该路径，此步骤可快速排查路径是否正确）。

4. 重启开发服务
   修改配置或依赖后，重启Tauri开发服务器确保变更生效：

   npm run tauri dev
   

内容的提问来源于stack exchange，提问作者wineT