Load Image
How to load and render images in Takumi
Before reading this guide, make sure you know how to construct and style image nodes. See Building Layouts for more details.
Persistent Storage
Takumi provides a persistent storage in every renderer instance. It allows you to load images from files or URLs and cache them for later use.
The storage is basically a key-value store, so you can name your keys with any identifier you like.
This is particularly useful for frequently used images, as it avoids the overhead of fetching them repeatedly.
Image Source Compatibility
The src property of an image node can accept a URL, file path, or a data URI.
However, support for these sources varies depending on the Takumi package you are using. This is primarily to minimize binary size for embedded Takumi versions, as certain features are disabled by default.
The table below outlines the compatibility for each package:
| Type / Package | URL (Remote) | Persistent Storage | Data URI (Base64 Encoded) |
|---|---|---|---|
@takumi-rs/core | ❌ (Requires manual fetching, then pass as Data URI) | ✅ | ✅ |
@takumi-rs/wasm | ❌ (Requires manual fetching, then pass as Data URI) | ✅ | ✅ |
takumi-server | ✅ (Handles fetching internally) | ✅ | ✅ |