Images are not found when I work with the asset! macro

[crp82]

I am currently in the process of switching from dioxus v 0.5.x to dioxus v 0.6.x in my project. I have the problem that my images and icons that I use in my UI are no longer displayed.
So far I have always maintained the additional images and other resources in a res directory. The res directory always had to be on the same directory level as the binary.

Basically, I like the idea that I can now integrate the static resources previously used externally into the binary using the asset! macro. However, there is still one step missing in the documentation and I am hoping for your valued support. I have already worked through the Assets Guide and the Tutorial, but unfortunately it does not work for me as it is described there.
I have started to create the first resources as assets in an assets.rs file:

use dioxus::prelude::*;

pub const CUSTOM_INDEX: &str = include_str!(‘custom_index.html’);
pub const IMG_WORKING_DESK:Asset = asset!(
    ‘/res/images/working_desk.jpg’,
    ImageAssetOptions::new().with_format(ImageFormat::Webp)
);
pub const IMG_APP_ICON:Asset = asset!(‘/res/images/app_icon.png’);
pub const CSS_MAIN:Asset = asset!(‘/res/styles/main.css’);

In my UI, I use these new assets as follows:

fn main_ui() -> element {
    //...
    //DEBUG
    const TEST_ASSET:Asset = asset!(
        ‘/res/images/working_desk.jpg’,
        ImageAssetOptions::new().with_format(ImageFormat::Webp)
    );
    println!(‘TEST_ASSET path: {}’, TEST_ASSET);
    //DEBUG
    rsx! {
        document::Stylesheet { href: CSS_MAIN }
        style { { format!(‘:root {{ --background-image-url: url(’{}‘); }}’, IMG_WORKING_DESK) } }
        img { src: TEST_ASSET}             
        //...
    }
}

If I compile my application using cargo run, the application starts. The configured css file is accepted. The absolute paths to the images on my system are shown in the inspector. The files are found but not displayed. In the inspector I can see under Notwork that this message appears in the Security tab:

The resource was requested insecurely.

If I start the binary from the target/debug directory, the paths are different and the images are not found. When I open the inspector, I see this information in the Console tab:

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (main-80abd743cc2a0d09.css, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (working_desk-c265ae2c0bbb84b7.webp, line 0)

In the Network Tab the links look like this:

Summary
URL: dioxus://index.html/assets/working_desk-c265ae2c0bbb84b7.webp
Status: —
Source: —

How can I ensure that the required resources are found and displayed?

[crp82]

I had not installed and used the dioxus-cli toolchain before. I have now done this and have to realise that the assets are now delivered in an assets folder with the binary. the path to the binary after executing the dx serve command is:
target/dx/my_project/debug/linux/app

In this case I can simply continue to work directly with my res directory and must pass the directory in the configuration via with_resource_directory:

.with_resource_directory(binary_path.parent().unwrap().join(‘res’))

In any case, the images are recognised, but not loaded and displayed. I suspect that it is due to the text The resource was requested insecurely.. What is the reason for this and how can I ensure that the images are displayed again?

[crp82]

With dioxus 0.5.x my application looked as shown in this picture

With dioxus 0.6.1 my application looks as shown in this picture.

Any help is welcome. The images are found but not displayed. What is the reason?

[jkelleyrtp]

const TEST_ASSET:Asset = asset!(
‘/res/images/working_desk.jpg’,
ImageAssetOptions::new().with_format(ImageFormat::Webp)
);

ah - any with_format calls can only be used with dx serve since with_format incurs a post-processing step.

try using dx for development - it provides a much nicer experience than the typical cargo run experience.

[crp82]

Thanks for the advice. I have already done that with the result that instead of my res directory there is now an assets directory next to the binary. Unfortunately, the images are still not loaded and the result is the same as described above.
My current problem is that the images are recognised, but they are not loaded. I also have the same result with dx serve. What do I have to do so that my images are displayed again?

[crp82]

Opened new topic, because this is not the reason for not displaying the images