Is it possible to reference a local asset? such as an image about dioxus

[jkelleyrtp]

I think it's not working because our custom protocol is not a valid url for images. Technically we can load other resources with custom protocols, but I don't think the image infrastructure in webview supports non http/https image sources.

Anyways, asset support is now in master thanks to #166

[jkelleyrtp]

Dioxus v0.1.7 doesn't support this, but master does -

You can use a custom protocol to serve a file type, provided you have your own custom internal url. Something like assets://path/to/my/image.png

https://github.com/tauri-apps/wry/blob/next/examples/custom_protocol.rs

When configuring your webview runtime in launch_cfg, you can set up a custom protocol that serves your static assets with the custom_protocol method on the desktop configuration builder.

[jkelleyrtp]

Thanks for filing this issue - we can easily include a default asset search algorithm so you don't even need to set this up yourself. Great feature for 0.2!

We do need to consider the security aspect of this though since this would allow you to read any file you want.

[Nejat]

based on @jkelleyrtp suggestions, i wrote this ...

    const ASSETS_PROTOCOL: &str = "assets://";

    use dioxus::desktop::tao::dpi::LogicalSize;

    desktop::launch_cfg(app, |cfg| {
        cfg.with_custom_protocol(
            ASSETS_PROTOCOL.into(),
            |request| {
                let path = PathBuf::from(request.uri().replace(ASSETS_PROTOCOL, ""));
                let extension = path.extension().map_or_else(|| Cow::from(""), |v| v.to_string_lossy());

                let meta = match extension.as_ref() {
                    "html" => "text/html",
                    "js" => "text/javascript",
                    "png" => "image/png",
                    "jpg" | "jpeg" => "image/jpeg",
                    "svg" => "image/svg+xml",
                    _ =>
                        return
                            ResponseBuilder::new()
                                .status(StatusCode::NOT_IMPLEMENTED)
                                .body(vec![])
                };

                ResponseBuilder::new().mimetype(meta).body(read(canonicalize(&path)?)?)
            },
        );

        cfg.with_window(
            |w| {
                w.with_title("Rust GUI")
                    .with_resizable(true)
                    .with_inner_size(LogicalSize::new(640.0, 480.0))
            }
        )
    });

but that causes this compile error

error[E0507]: cannot move out of `*cfg` which is behind a mutable reference
  --> src\main.rs:31:9
   |
31 | /         cfg.with_custom_protocol(
32 | |             ASSETS_PROTOCOL.into(), |request| {
33 | |                 let path = PathBuf::from(request.uri().replace(ASSETS_PROTOCOL, ""));
34 | |                 let extension = path.extension().map_or_else(|| Cow::from(""), |v| v.to_string_lossy());
...  |
49 | |             },
50 | |         );
   | |_________^ move occurs because `*cfg` has type `DesktopConfig`, which does not implement the `Copy` trait

with_custom_protocol needs to own cfg so i don't know how to compile this

[jkelleyrtp]

Okay, I implemented a default asset server in this pull request. If checks pass, I am happy to merge it into master. For the time being, can you test out this for your use case?

@Nejat

#166

[jkelleyrtp]

Oh, for your example I think you need to chain .with_window on the back of custom_protocol instead of having them separate. We use the &mut flavor of builders, but the return an &mut Self, so they must be chained or assigned.

[Nejat]

@jkelleyrtp that's how i had it originally, that doesn't compile either

I'll check out the #166

[Nejat]

btw, i love this project and where it's going, thanks for the great work

[jkelleyrtp]

Oh, I'm so sorry it looks like the method for cfg builder takes an mut self which is an error.

You can manually push the protocol in in the meantime.

cfg.protocs.push(protocol)

[Nejat]

#166 worked, i followed the example and my app is rendering the png as expected with a src of src/assets/image/logo.png

for completeness i also tested the custom protocol with with_custom_protocol, which now compiles, and cfg.protocs.push(protocol) but neither worked with assets://src/assets/image/logo.png

when i check the developer console, i ran the app in debug, i see the following message in the console tab

Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME logo.png

and hovering over logo.png shows assets://src/assets/images/logo.png as expected

hope that helps

Thanks for the quick turn around

[jkelleyrtp]

#166 worked, i followed the example and my app is rendering the png as expected with a src of src/assets/image/logo.png

for completeness i also tested the custom protocol with with_custom_protocol, which now compiles, and cfg.protocs.push(protocol) but neither worked with assets://src/assets/image/logo.png

when i check the developer console, i ran the app in debug, i see the following message in the console tab

Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME logo.png

and hovering over logo.png shows assets://src/assets/images/logo.png as expected

hope that helps

Thanks for the quick turn around

The "custom protocol" solution would require prefixing with the protocol name, I think.

img {
    src: "assets://src/assets/image/logo.png"
}

But, if 166 works for you then I can merge it into the mainline.

[Nejat]

yes, thank you 166 works for me

this is exactly how i tested it

img {
    src: "assets//src/assets/images/logo.png"
}

[jkelleyrtp]

yes, thank you 166 works for me

this is exactly how i tested it

img {
    src: "assets//src/assets/images/logo.png"
}

Was your code missing the : between assets and // ?
It's supposed to be like https://

[Nejat]

no, it wasn't missing. there was a typo in my last message

that's why i was able to see it in the debug console of, the app, when i hovered over the error

[blemelin]

This section of the wry docs might help. It look like there's some platform-specific behaviour. I've tried some things, and here's what I found :

Lets say we want a app:// custom protocol to serve a file named awesome.png :

• On Windows, the url would be https://app.awesome.png.
• On Mac and Linux, the url will would be app://awesome.png

Isn't odd ? Am I missing something ? I could create a macro to build my URLs depending on the current platform, but I can't imagine there wouldn't be a better solution.