Tauri应用中JS加载本地图片报错：不允许加载本地资源

问题原因 #

Tauri的安全机制会阻止WebView直接加载本地绝对路径的资源，你设置的tauri.allowlist.fs.scope仅控制Tauri文件系统API（如readFile）的访问权限，不作用于DOM的资源加载逻辑，所以直接给Image.src赋值绝对路径会触发权限错误。

解决方案 #

方法1：使用convertFileSrc转换路径（推荐）

Tauri提供了convertFileSrc工具，能将本地绝对路径转换为WebView允许加载的安全URL格式（如tauri://localhost/xxx）。

示例代码：

async function loadLocalImage() {
    // 获取exe所在目录
    const exeDir = await window.__TAURI__.path.executableDir();
    // 拼接图片的绝对路径（替换成你的图片文件名）
    const absolutePath = await window.__TAURI__.path.join(exeDir, "generated-image.png");
    // 转换为安全URL
    const safeImageUrl = window.__TAURI__.convertFileSrc(absolutePath);
    
    // 加载图片
    const image = new Image();
    image.onload = () => redraw();
    image.src = safeImageUrl;
}

// 调用加载函数
loadLocalImage();

方法2：通过Rust将图片转为Base64返回给JS

既然图片是Rust生成的，可以直接在Rust命令中读取图片并转为Base64字符串，JS再用data URI加载。

Rust命令代码：

use base64::{engine::general_purpose, Engine as _};
use std::fs;
use std::path::Path;

#[tauri::command]
pub fn get_generated_image_base64() -> Result<String, String> {
    // 获取exe所在目录
    let exe_path = std::env::current_exe().map_err(|e| e.to_string())?;
    let img_path = exe_path.parent()
        .ok_or("无法获取可执行文件所在目录")?
        .join("generated-image.png");
    
    // 读取图片并转Base64
    let img_bytes = fs::read(img_path).map_err(|e| e.to_string())?;
    Ok(general_purpose::STANDARD.encode(img_bytes))
}

JS调用代码：

async function loadImageFromBase64() {
    const base64Str = await window.__TAURI__.invoke("get_generated_image_base64");
    const image = new Image();
    image.onload = () => redraw();
    image.src = `data:image/png;base64,${base64Str}`;
}

loadImageFromBase64();

关键说明 #

• convertFileSrc是Tauri专门用于解决本地资源加载权限的工具，适配所有支持的平台，无需手动处理路径分隔符或权限问题。
• 若使用Base64方案，注意大图片会增加内存占用，适合小尺寸图片场景。

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