The tauri app im making requires me to dynamically create .png files in the app’s AppData directory.
I am quite new to tauri and, probably due to my feign ignorance in reading the docs that seems to have 3 or more versions, I am not yet aware of how tauri handles/install the app. Meaning im not sure if it recreates the src/ (frontend) and src-tauri/ (backend) folders we see during development. I’ve had the idea of storing a copy to src/assets… while the js file is stored in src/. But that will most likely not work as tauri will probably not store and compile the app the same way as in devtime.
The png files will then be displayed as backround-images, supposedly, via js.
If you’re wondering why this might work well with absolute paths… well, tauri comes in with path lib wherein common directories can be retrieved, whatever the user is or whatever the os is (windows, linuz, macos). using this we can get an absolute path (this one for some png in Documents) by:
const { documentDir } = window.__TAURI__.path;
var docDir = await documentDir(); // outputs C:Users...Documents, if in Windows
var urlPath = ('url("' + docDir + 'someFolder\someImage.png")').replaceAll("\", "/");
$("#someId").css("background-image", urlPath);
I hope you can see the problem now. urls will not accept absolute paths and hence cause an error when trying to set the url to background-image.
!!!
how do i get around this? is there a way to allow absolute paths?
!!!
I already tried to use tauri’s fs copyFile to create a copy of the png file to the src/assets. copyFile, in my case, takes 3 args: path_to_file_being_copied, destination_path, { dir: BaseDirectory.AppData }. the third arg is essentially the same as the tauri path but in here, it automatically binds the paths. Problem is it also binds to the destination_path. So rather than ‘assets/destinationImage.png’ it becomes ‘AppData/assets/destinationImage.png’
i tried asking ChatGPT if it knew a way to somehow store the png file as a binary or some datafile instance and use that instead. but i quickly gave up on that as background-image seem to not accept that kind input.
i havent tried using the rust backend for this because this is essentially a problem of the ‘browser’ tauri, and most actual browsers, uses.
look… somehow i managed to solve the problem minutes after posting this question. that may be a sign that it helps writing down your problems as it allows you to understand it better (you cant explain to others what you cant understand yourself)
anyway! We can actually store a file as an instance via data URLs.
here is an example code using tauri’s fs.readBinaryFile:
const { readBinaryFile } = window.__TAURI__.fs;
const { documentDir } = window.__TAURI__.path;
var docDir = await documentDir(); // outputs C:Users...Documents, if in Windows
var imagePath = (docDir + "someFolder\somePNG.png").replaceAll("\", "/");
try {
// read the image file as binary
const binaryData = await readBinaryFile(imagePath);
// convert binary data to a base64 string
const base64String = btoa(String.fromCharCode(...new Uint8Array(binaryData)));
// create a data URL
const dataUrl = `data:image/png;base64,${base64String}`;
// change the background image
$("#someID").css("background-image", `url(${dataUrl})`);
} catch (error) {
console.error('Error reading image file:', error);
}