Load folder as asset / make 800+ images availiable on frontend only?

[TheGrinchOnMath]

Hey,
To learn Dioxus (& the latter half of the Rust-Book) for a future project, I have started writing a vanillaJS website I made a year ago on github pages using dioxus. I have since then run into the following issue:
The dioxus guide page for assets only indicates how to load single files.
I am aware that loading 800 images on frontend increases load times, however since I cannot for the near future afford, both time and energy wise, to setup a backend server to serve the images a free solution is much better.

Is there a way to load a folder of asset images without 800 lines of asset macros?
Is it actually viable in any way, shape or form?
If not, what approach would you reccomend to serve images to a web (maybe desktop) target? the images are not necessary, but are quite useful for the application

I am still fairly new to Rust and developement in general (1st year university student), so I apologize in advance for anything I did wrong so far.

[ealmloff]

Yes, you can include a whole folder with the asset macro like this:

let folder = asset!("path/to/local/folder");
let file = format!("{folder}/file/within/folder.png");

[TheGrinchOnMath]

Where would I put the suggestion of adding this to the guide?

[ealmloff]

You can open a PR or Issue on the docsite repo: https://github.com/DioxusLabs/docsite

[paul-hansen]

Note that at least in v0.7.0-alpha.3 using a folder in the asset macro this way does not hot reload them when they change.

[jkelleyrtp]

Does your app hot-patch after editing asset folders if you run with serve --hotpatch? If not, then that's probably a bug.

[paul-hansen]

Still doesn't do anything with --hotpatch, will open a bug report 👍

Edit: opened here: #4518

[tgrushka]

Folder assets are great! Please add to the guide. This took forever to figure out (I am visually impaired, using AI to search the dioxus code, docs, etc. and still couldn't figure out.)

This is fantastic:

const WORKERS: Asset = asset!("/assets/workers");

✅ Folder name hashed:

/bin/ls target/dx/ui/debug/web/public/assets
blog-dxh2b1155bcdf1f5bc7.css	main-dxhde21d93e5d8b5f86.css
favicon-dxh258399c2bb8e4026.ico	navbar-dxhbae33524d8a1d48e.css
header-dxh6eb1b48f96609c96.svg	workers-dxh54f5fd53c4ff249

✅ Filenames within folder not hashed (excellent!):

/bin/ls target/dx/ui/debug/web/public/assets/
workers-dxh54f5fd53c4ff249
neteq_worker_bg.wasm	worker_decoder_bg.wasm
neteq_worker.js		worker_decoder.js

This is exactly what we want, especially with WASM worker/JS loader pairs, because wasm-bindgen generates the JS workers, and they expect the same filename - ext + _bg.wasm. So, it works.

Yes, please add this to the Guide!