Reputation: 11
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.
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"
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
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