Struct ImageProps

pub struct ImageProps {

    pub src: &'static str,
    pub alt: &'static str,
    pub fallback_src: &'static str,
    pub width: &'static str,
    pub height: &'static str,
    pub style: &'static str,
    pub class: &'static str,
    pub sizes: &'static str,
    pub quality: &'static str,
    pub loading: Loading,
    pub placeholder: &'static str,
    pub on_load: Callback<()>,
    pub object_fit: ObjectFit,
    pub object_position: Position,
    pub on_error: Callback<String>,
    pub decoding: Decoding,
    pub blur_data_url: &'static str,
    pub lazy_boundary: &'static str,
    pub unoptimized: bool,
    pub layout: Layout,
    pub node_ref: NodeRef,
    pub srcset: &'static str,
    pub crossorigin: CrossOrigin,
    pub referrerpolicy: ReferrerPolicy,
    pub usemap: &'static str,
    pub ismap: bool,
    pub fetchpriority: FetchPriority,
    pub elementtiming: &'static str,
    pub attributionsrc: &'static str,
    pub aria_current: &'static str,
    pub aria_describedby: &'static str,
    pub aria_expanded: &'static str,
    pub aria_hidden: &'static str,
    pub aria_live: AriaLive,
    pub aria_pressed: AriaPressed,
    pub aria_controls: &'static str,
    pub aria_labelledby: &'static str,
}

Available on crate feature yew only.

Properties for the Image component.

The Image component allows you to display an image with various customization options for layout, styling, and behavior. It supports fallback images, lazy loading, and custom callbacks for error handling and loading completion.

This component is highly flexible, providing support for multiple image layouts, object-fit, object-position, ARIA attributes, and more.

See Also

• MDN img Element

Fields

src: &'static str

The source URL of the image.

This is the URL of the image to be displayed. This property is required for loading an image. If not provided, the image will not be displayed.

alt: &'static str

The alternative text for the image.

This is the alt text for the image, which is used for accessibility purposes. If not provided, the alt text will be empty.

fallback_src: &'static str

Optional fallback image.

This image will be displayed if the main image fails to load. If not provided, the image will attempt to load without a fallback.

width: &'static str

The width of the image.

Specifies the width of the image in pixels. It is typically used for responsive layouts. Defaults to an empty string if not provided.

height: &'static str

The height of the image.

Specifies the height of the image in pixels. Like width, it is often used for responsive layouts. Defaults to an empty string if not provided.

style: &'static str

The style attribute for the image.

Allows you to apply custom inline CSS styles to the image. Defaults to an empty string.

class: &'static str

The CSS class for the image.

This can be used to apply custom CSS classes to the image for styling purposes. Defaults to an empty string if not provided.

sizes: &'static str

The sizes attribute for the image.

This is used to define different image sizes for different viewport widths, helping with responsive images. Defaults to an empty string if not provided.

quality: &'static str

The quality attribute for the image.

Allows you to set the quality of the image (e.g., “low”, “medium”, “high”). Defaults to an empty string if not provided.

loading: Loading

Indicates if the image should have priority loading.

This controls whether the image should be loaded eagerly (immediately) or lazily (when it enters the viewport). Defaults to false.

placeholder: &'static str

The placeholder attribute for the image.

Allows you to specify a placeholder image URL or data URL to show while the main image is loading. Defaults to an empty string.

on_load: Callback<()>

Callback function for handling loading completion.

This callback is triggered once the image has finished loading. This is useful for actions that should happen after the image has been fully loaded, such as hiding a loading spinner. Defaults to a no-op.

object_fit: ObjectFit

The object-fit attribute for the image.

Determines how the image should be resized to fit its container. Common values include “contain”, “cover”, “fill”, etc. Defaults to an empty string.

object_position: Position

The object-position attribute for the image.

Specifies how the image should be positioned within its container when object-fit is set. The available options are:

• Position::Center: Centers the image within the container.
• Position::Top: Aligns the image to the top of the container.
• Position::Bottom: Aligns the image to the bottom of the container.
• Position::Left: Aligns the image to the left of the container.
• Position::Right: Aligns the image to the right of the container.
• Position::TopLeft: Aligns the image to the top-left of the container.
• Position::TopRight: Aligns the image to the top-right of the container.
• Position::BottomLeft: Aligns the image to the bottom-left of the container.
• Position::BottomRight: Aligns the image to the bottom-right of the container.

Defaults to Position::Center.

on_error: Callback<String>

Callback function for handling errors during image loading.

This callback is triggered if the image fails to load, allowing you to handle error states (e.g., displaying a fallback image or showing an error message).

decoding: Decoding

The decoding attribute for the image.

Specifies how the image should be decoded. The available options are:

• Decoding::Auto: The image decoding behavior is automatically decided by the browser.
• Decoding::Sync: The image is decoded synchronously (blocking other tasks).
• Decoding::Async: The image is decoded asynchronously (non-blocking).

Defaults to Decoding::Auto.

blur_data_url: &'static str

The blur data URL for placeholder image.

This is used to display a low-quality blurred version of the image while the full image is loading. Defaults to an empty string.

lazy_boundary: &'static str

The lazy boundary for lazy loading.

Defines the distance (in pixels) from the viewport at which the image should start loading. Defaults to an empty string.

unoptimized: bool

Indicates if the image should be unoptimized.

If set to true, the image will be loaded without any optimization applied (e.g., no resizing or compression). Defaults to false.

layout: Layout

Image layout.

Specifies how the image should be laid out within its container. Possible values include Layout::Fill, Layout::Responsive, Layout::Intrinsic, Layout::Fixed, Layout::Auto, Layout::Stretch, and Layout::ScaleDown. Defaults to Layout::Responsive.

node_ref: NodeRef

Reference to the DOM node.

This is used to create a reference to the actual DOM element of the image. It is useful for directly manipulating the image element via JavaScript if needed.

srcset: &'static str

A list of one or more image sources for responsive loading.

Defines multiple image resources for the browser to choose from, depending on screen size, resolution, and other factors. Each source can include width (w) or pixel density (x) descriptors.

crossorigin: CrossOrigin

Cross-origin policy to use when fetching the image.

Determines whether the image should be fetched with CORS enabled. Useful when the image needs to be accessed in a <canvas> element. Accepts anonymous or use-credentials.

referrerpolicy: ReferrerPolicy

Referrer policy to apply when fetching the image.

Controls how much referrer information should be included with requests made for the image resource. Common values include no-referrer, origin, strict-origin-when-cross-origin, etc.

usemap: &'static str

The fragment identifier of the image map to use.

Associates the image with a <map> element, enabling clickable regions within the image. The value should begin with # and match the name of the corresponding map element.

ismap: bool

Indicates that the image is part of a server-side image map.

When set, clicking the image will send the click coordinates to the server. Only allowed when the image is inside an <a> element with a valid href.

fetchpriority: FetchPriority

Hints the browser about the priority of fetching this image.

Helps the browser prioritize network resource loading. Accepts high, low, or auto (default). See HTMLImageElement.fetchPriority for more.

elementtiming: &'static str

Identifier for tracking image performance timing.

Registers the image with the PerformanceElementTiming API using the given string as its ID. Useful for performance monitoring and analytics.

attributionsrc: &'static str

URL(s) to send Attribution Reporting requests for the image.

Indicates that the browser should send an Attribution-Reporting-Eligible header with the image request. Can be a boolean or a list of URLs for attribution registration on specified servers. Experimental feature.

aria_current: &'static str

Indicates the current state of the image in a navigation menu.

Valid values are “page”, “step”, “location”, “date”, “time”, “true”, “false”. This is useful for enhancing accessibility in navigation menus.

aria_describedby: &'static str

Describes the image using the ID of the element that provides a description.

The ID of the element that describes the image. This is used for accessibility purposes, particularly for screen readers.

aria_expanded: &'static str

Indicates whether the content associated with the image is currently expanded or collapsed.

This is typically used for ARIA-based accessibility and is represented as “true”, “false”, or “undefined”.

aria_hidden: &'static str

Indicates whether the image is currently hidden from the user.

This attribute is used for accessibility and indicates whether the image is visible to the user or not. Valid values are “true”, “false”, or “undefined”.

aria_live: AriaLive

Indicates whether the content associated with the image is live and dynamic.

The value can be “off”, “assertive”, or “polite”, helping assistive technologies determine how to handle updates to the content.

aria_pressed: AriaPressed

Indicates whether the image is currently pressed or selected.

This attribute can have values like “true”, “false”, “mixed”, or “undefined”.

aria_controls: &'static str

ID of the element that the image controls or owns.

Specifies the ID of the element that the image controls or is associated with.

aria_labelledby: &'static str

ID of the element that labels the image.

Specifies the ID of the element that labels the image for accessibility purposes.

Trait Implementations

impl Clone for ImageProps

fn clone(&self) -> ImageProps

Returns a duplicate of the value.

fn clone_from(&mut self, source: &Self)

Performs copy-assignment from source.

impl Default for ImageProps

fn default() -> Self

Returns the “default value” for a type.

impl PartialEq for ImageProps

fn eq(&self, other: &ImageProps) -> bool

Tests for self and other values to be equal, and is used by ==.

fn ne(&self, other: &Rhs) -> bool

Tests for !=. The default implementation is almost always sufficient, and should not be overridden without very good reason.

impl Properties for ImageProps

type Builder = ImagePropsBuilder

Builder that will be used to construct properties

fn builder() -> Self::Builder

Entrypoint for building properties

impl StructuralPartialEq for ImageProps