Load images at runtime

[amitmaish]

Hello, I'm new to Dioxus (new to frontend in general) and I'm building a music player app.

The user will provide the path to a folder with the assets (audio files and album art) and I want a way to display them at runtime. I looked at the dynamic assets example, but that didn't work for me. I read a discussion in which people said you can base64 encode the image and use that as a url but after poking around I couldn't make that work.

rsx! {
    img {
        src: ????
    }
}

I would appreciate any guidance on this issue.

[f-saez]

Hi,

I'm far from being knowledgeable with dioxus, but to convert an image (as in an array of bytes) to a "src" (a string), you could try this :

cargo.toml :

web-sys = { version = "0.3", features = ["Url"] }

and the code :

use web_sys::js_sys::{Array, Uint8Array};
use web_sys::Blob;
use web_sys::Url;

fn web_sys_download_url(bytes: &[u8]) -> Option<String> {
    let mut result = None;
    let uint8arr = Uint8Array::new(&unsafe { Uint8Array::view(bytes) }.into());
    let array = Array::of1(&uint8arr.buffer());
    if let Ok(blob) = Blob::new_with_u8_array_sequence(&array) {
        if let Ok(stuff) = Url::create_object_url_with_blob(&blob) {
            result = Some(stuff);
        }
    }
    result
}

Let's call the resulting string image, you should be able to do this :

 rsx! {
        img {
            src: "{image}",
         }
}

You may also want to have a look at :
https://docs.rs/photon-rs/latest/photon_rs/index.html