I'm making a dream journal application in Electron and Svelte. I have a custom file format containing a title, description, and one or more images. See:
Program Input
File Output
When I need to, I can call ipcRenderer.invoke() to read the file in the main process, then return that to retrieve it in the renderer process (don't worry, I'm using async await to make sure I'm not just getting a promise. Also, for my testing, I'm only sending back the Uint8Array representative of the image).
After attempting to display the image and failing, I decided I'd check to see that I was receiving the information as intended. I sent the response as-is back to the main process and wrote it to a file. When I opened the file in Paint, it displayed.
So, the information is correct. This is the code I tried to display the image with:
within <script>
let src;
onMount(async () => {
let a = await ipcRenderer.invoke("file-read");
console.log(a);
let blob = new Blob(a, {type: 'image/png'});
console.log(blob);
ipcRenderer.send("verify-content", a); // this is the test I mentioned, where it was written to a file
src = URL.createObjectURL(blob);
});
in the body
{#if src}
<img src={src} />
{/if}
I also tried it another way:
within <script>
onMount(async () => {
let a = await ipcRenderer.invoke("file-read");
console.log(a);
let blob = new Blob(a, {type: 'image/png'});
console.log(blob);
ipcRenderer.send("verify-content", a);
const img = document.createElement("img");
img.src = URL.createObjectURL(blob);
img.onload = function() {
URL.revokeObjectURL(this.src);
}
document.getElementById("target").appendChild(img);
});
in the body
<div id="target"></div>
However, this is all I got:
It does not display. How can I display this image? All the other "blob to img" examples I found used the type="file" <input /> tag. If possible, I'd like to avoid using a Base64 data URI. Thanks.
