using local image in webview | Tauri Apps | Page 1

void ruin Feb 5, 2023, 12:47 AM

#

apologies in advance, i've combed the support threads and docs and there's a lot of consistency on what needs to happen to use a local image from the localhost filesystem as a source for an image element

so here's the setup

I've updated my tauri.config.json:

"security": {
      "csp": "default-src 'self'; img-src 'self' asset: https://asset.localhost"
},```

i'm using the file open dialog, which 'should' update the filesystem and asset scope list.

i'm logging out the html element, to confirm its there,...
i'm logging out the file path of the dialog
i'm logging out the assetURL after converting it
then i'm setting the image.src property of the element above, and i get an error, maybe ya'll have seen this before

so i've either forgotten to configure something, or i've done something else stupid...

the converted URL is a format that looks questionable to me, but i'm a noob at Tauri, so who knows...

Thoughts?

boreal cliff Feb 5, 2023, 9:12 AM

#

I think you still need to enable the fs module, the scope will get updated but the module may require compilation time steps

void ruin Feb 5, 2023, 1:21 PM

#

Fs is in the allowlist

#

I forgot to mention that

teal lagoon Feb 5, 2023, 1:26 PM

#

the converted URL is a format that looks questionable to me, but i'm a noob at Tauri, so who knows...
Looks alright actually.

Can you try configuring the scope for the asset protocol just to rule that out?

i'm using the file open dialog
Tauri's dialog, not the webview native one right?

can you try using fetch() with the url?

void ruin Feb 5, 2023, 1:51 PM

#

i will check that

void ruin Feb 5, 2023, 2:07 PM

#

teal lagoon > the converted URL is a format that looks questionable to me, but i'm a noob at...

yes, i'm using Tauri's dialog

#

the fetch() fails too

#

current function:

#

    console.log("image element: ", model.imgElm);
    const selectedFile = await open({
      multiple: false,
      filters: [
        {
          name: "Image",
          extensions: ["png", "jpg"],
        },
      ],
    });
    console.log("file path", selectedFile);
    const assetUrl = convertFileSrc(<string>selectedFile);
    console.log("converted path: ", assetUrl);
    //(testimage as HTMLImageElement).src = assetUrl;
    const newrslt = await fetch(assetUrl);
    console.log(newrslt);```

#

and my allowlist

#

"tauri": {
    "allowlist": {
      "all": false,
      "shell": {
        "all": false,
        "open": true
      },
      "dialog": {
        "all": true,
        "open": true,
        "save": true
      },
      "fs": {
        "all": true,
        "readFile": true,
        "writeFile": true,
        "readDir": true,
        "copyFile": true,
        "createDir": true,
        "removeDir": true,
        "removeFile": true,
        "renameFile": true,
        "exists": true
      },
      "notification": {
        "all": true
      },
      "clipboard": {
        "all": true,
        "writeText": true,
        "readText": true
      }
    },```

#

#

anything need to go into the config under bundle: resources?

#

i'll take a video real quick

#

it has to be a local filesystem access issue

#

like... its not letting my app get to the file

teal lagoon Feb 5, 2023, 2:20 PM

#

and if you try to load the file with the fs.readBinaryFile api? that may give us an actual error message

void ruin Feb 5, 2023, 2:22 PM

#

i will try that

#

i do see it 'attempt' to load the image

#

and the assetURL goes into the src attribute

#

teal lagoon Feb 5, 2023, 2:24 PM

#

did you try any other image?

void ruin Feb 5, 2023, 2:26 PM

#

Type 'Promise<Uint8Array>' is not assignable to type 'string'.ts(2322)

#

that's when i try to use the readBindaryFile, TS doesn't let me

#

the .src attribute for an ImageElement is a string type

void ruin Feb 5, 2023, 2:26 PM

#

teal lagoon did you try any other image?

good idea, lemme try

#

different image, same rslt

#

is there an example somewhere that somebody's doing this?

#

like an image viewer app

#

this seems soooo fundamental that someone's had to do it

#

hold on...

#

#

i figured it out

#

"protocol": {
        "all": false,
        "asset": true,
        "assetScope": ["/**/*"]
},

#

that was missing

void ruin Feb 5, 2023, 2:33 PM

#

teal lagoon > the converted URL is a format that looks questionable to me, but i'm a noob at...

you actually say this too

#

i just didn't understand what you meant

#

the only way i figured it out was to compare an tauri image viewer app config file to mine and looked for the difference

#

@boreal cliff @teal lagoon , thanks for your guidance, another experience brick in the wall

teal lagoon Feb 5, 2023, 2:41 PM

#

void ruin ```ts "protocol": { "all": false, "asset": true, "assetS...

yeah the thing with that is, this is what the dialog is supposed to do for you, but just for the selected files for added security 🤔 just wanted to test this to see if it's indeed a scope issue

void ruin Feb 5, 2023, 2:45 PM

#

do you need anything from me?

teal lagoon Feb 5, 2023, 2:45 PM

#

actuallyyy

#

can you try removing the assetScope line? i just noticed that the whole protocol block was missing from the config you posted earlier

void ruin Feb 5, 2023, 2:47 PM

#

testing now

#

it still works with that line deleted

teal lagoon Feb 5, 2023, 2:47 PM

#

okay cool, no bugs then. Just me being blind kkushLUL

void ruin Feb 5, 2023, 2:47 PM

#

me being new... so we're tied

#using local image in webview