Module image

image element let’s you show an image.

For dynamic Images you may use dynamic_bytes.

Example

static RUST_LOGO: &[u8] = include_bytes!("./rust_logo.png");

fn app() -> Element {
    let image_data = static_bytes(RUST_LOGO);
    rsx!(
        image {
            image_data,
            width: "100%", // You must specify size otherwhise it will default to 0
            height: "100%",
        }
    )
}

Constants

a11y_access_key

a11y_author_id

a11y_auto_complete

a11y_auto_focus

a11y_busy

a11y_color_value

a11y_column_count

a11y_column_index

a11y_column_index_text

a11y_column_span

a11y_current

a11y_default_action_verb

a11y_description

a11y_disabled

a11y_expanded

a11y_focusable

a11y_has_popup

a11y_hidden

a11y_hovered

a11y_id

a11y_invalid

a11y_is_grammar_error

a11y_is_search_match

a11y_is_spelling_error

a11y_is_suggestion

a11y_keyboard_shortcut

a11y_language

a11y_level

a11y_linked

a11y_list_style

a11y_live

a11y_live_atomic

a11y_max_numeric_value

a11y_min_numeric_value

a11y_modal

a11y_multiselectable

a11y_name

a11y_numeric_value

a11y_numeric_value_jump

a11y_numeric_value_step

a11y_orientation

a11y_placeholder

a11y_position_in_set

a11y_read_only

a11y_required

a11y_role

a11y_role_description

a11y_row_count

a11y_row_index

a11y_row_index_text

a11y_row_span

a11y_scroll_x

a11y_scroll_x_max

a11y_scroll_x_min

a11y_scroll_y

a11y_scroll_y_max

a11y_scroll_y_min

a11y_selected

a11y_size_of_set

a11y_sort_direction

a11y_state_description

a11y_toggled

a11y_tooltip

a11y_touch_transparent

a11y_url

a11y_value

a11y_vertical_offset

a11y_visited

aspect_ratio

aspect_ratio controls how an image element is rendered when facing unexpected dimensions.

cache_key

cache_key lets you specify an unique identifier for the given image. This will help Freya cache the image decoding, if the cache_key changes the old cache will be pruned and the image (changed or not) will be decoded again. cache_key is optinal but its recommended to be used, specialy for high quality images. You can pass any value that can be transformed into a string. Like a URL.

cover

cover controls how an image element position is rendered inside the given dimensions.

height

Specify the width for the given element.

image_data

image_reference

layer

margin

Specify the margin of an element. You can do so by four different ways, just like in CSS.

max_height

Specify a maximum height for the given element.

max_width

Specify a maximum width for the given element.

min_height

This can be useful if you use it alongside a percentage for the target size.

min_width

Specify a minimum height for the given element. This can be useful if you use it alongside a percentage for the target size.

opacity

position

Specify how you want the element to be positioned inside it’s parent area.

position_bottom

position_left

position_right

position_top

reference

rotate

sampling

sampling controls how an image element is resized when scaling from its original size to smaller or larger sizes.

width

Specify the height for the given element.