Module freya_elements::elements::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.