Azukitsu
Azukitsu

Reputation: 11

Problem with Javascript loading in an image on the computer in a Tauri webapp, error: "Tauri Not allowed to load local resource"

more on the problem

I would like to load an image on the computer using an absolute path in Javascript.

const image = new Image()
image.onload = function() => redraw();
image.src = absolutePath;

When I build the --debug version and run it the console errors: "Tauri Not allowed to load local resource: absolutePath". After that it (understandably) gives another error: Failed to execute 'drawImage' [...] The HTMLImageElement provided is in the 'broken' state "

Some more info: (potentially helpful) I'm using Tauri + Vanilla HTML, JS, CSS + Rust. I generated and saved the image using a Rust command invoked in the JS and am trying to put that image into a canvas on the HTML using JS. The Rust part saves the image to the same directory the .exe is in. build.withGlobalTauri is set to true and am using const invoke = window.__TAURI__.invoke for the invoke command.

things i tried

I have tried setting tauri.allowlist.fs.scope = ["**"] in tauri.conf.json but it did not change anything.

I expected that would allow the JS to access to "load [the] local resource"

my desperation

I've been trying to solve this problem for a while and have found little help from the docs or other sources.

Upvotes: 1

Views: 1349

Answers (1)

Dmitry Kaigorodov
Dmitry Kaigorodov

Reputation: 1533

Try https://tauri.app/v1/api/js/tauri#convertfilesrc

From official docs:

import { appDataDir, join } from '@tauri-apps/api/path';
import { convertFileSrc } from '@tauri-apps/api/tauri';
const appDataDirPath = await appDataDir();
const filePath = await join(appDataDirPath, 'assets/video.mp4');
const assetUrl = convertFileSrc(filePath);

const video = document.getElementById('my-video');
const source = document.createElement('source');
source.type = 'video/mp4';
source.src = assetUrl;
video.appendChild(source);
video.load();

Upvotes: -1

Related Questions