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.

content

Specify how you want the automatic (e.g width: auto) bounds in the cross axis to be constrained for the inner elements.

cover

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

cross_align

cross_align

direction

Control how the inner elements stack.

height

Specify the height for the given element.

image_data

Specify the image data for the image element.

image_reference

Specify an image reference handle for the image element.

layer

Controls the stacking order of elements on the z-axis.

main_align

main_align

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

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

min_width

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

offset_x

Moves the content inside of the container horizontally by the specified pixel amount. This attribute only supports pixels.

offset_y

Moves the content inside of the container vertically by the specified pixel amount. This attribute only supports pixels.

opacity

Specify the opacity for this element.

overflow

Specify how overflow should be handled.

position

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

position_bottom

Specify the bottom position of an element when using position: "absolute" or position: "global". This supports pixels only.

position_left

Specify the left position of an element when using position: "absolute" or position: "global". This supports pixels only.

position_right

Specify the right position of an element when using position: "absolute" or position: "global". This supports pixels only.

position_top

Specify the top position of an element when using position: "absolute" or position: "global". This supports pixels only.

reference

Attach a reference to an element to track its layout and metadata.

rotate

Specify the rotation for this element.

sampling

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

spacing

Specify a space between the inner elements. Think it as a margin for every element but defined by its parent. It only applies to the side of the direction.

width

Specify the width for the given element.