Recipe: package an image and compose visuals

luastra/assets · UI.Image · UI.Shape · about 15 minutes

Admit a PNG in the project manifest, keep its reference typed until UI.Image, and combine it with scalable semantic and decorative shapes.

You will download the public Luastra sample mark, render it inside a bounded image frame, toggle contain versus cover, and add both decorative and meaningful geometry.

The manifest admits bytes and media type. Assets.image validates the typed ID, Assets.uri creates the host-neutral URI, and UI.Image provides layout and accessibility meaning.

Do not pass a filesystem path, data URL, or arbitrary remote URL to UI.Image. Package the file, admit it in luastra.json, and pass Assets.uri(Assets.image(id)).

Detail pages

1. Create the project2. Replace luastra.json3. Replace src/main.luau4. Replace tests/smoke.luau5. Check and run6. Understand the boundaries