Image

Image is the general image widget.

Use it for photos, illustrations, thumbnails, diagrams, and any other visual content that belongs in the app's normal layout flow. The widget focuses on display, not asset management or accessibility semantics.

Example

use fission::core::op::ImageFit;
use fission::core::ui::Image;

let node = Image {
    source: view.state.hero_image_url.clone(),
    width: Some(320.0),
    height: Some(180.0),
    fit: Some(ImageFit::Cover),
    ..Default::default()
}
.into_node();

Cover is a good choice when the image should fill a card or hero frame even if some cropping occurs.

Field table

Field	Type	Meaning	Notes / default behavior
id	Option<NodeId>	Stable node identity.	Defaults to None.
source	String	Image source path, web address, inline scalable vector graphics (SVG), or SVG file path.	Required. The renderer treats inline <svg...> content and .svg files specially.
width	Option<f32>	Fixed layout width.	Defaults to None. Set explicit dimensions or parent constraints for predictable results.
height	Option<f32>	Fixed layout height.	Defaults to None.
fit	Option<ImageFit>	How the image should scale inside its box.	Defaults to Contain when rendering non-scalable vector graphics (SVG) images.

Responsive and accessibility notes

In responsive layouts, the main question is not only which image to show, but how much cropping is acceptable. Contain preserves the whole image but may leave empty space. Cover fills the region but may crop edges.

The current public contract does not include alt text or a semantic label. If the image carries meaning, provide that meaning with surrounding text or parent-level semantics instead of assuming assistive technology can infer it.

Specific advice

Give images deliberate layout constraints. A source string alone does not express how large the image should be in a flexible screen.

Related

Icon, Avatar, Card, and AspectRatio.