Skip to main content

StyledImage

gpui

Trait StyledImage 

Source 
pub trait StyledImage: Sized {
    // Required method
    fn image_style(&mut self) -> &mut ImageStyle;

    // Provided methods
    fn grayscale(self, grayscale: bool) -> Self { ... }
    fn object_fit(self, object_fit: ObjectFit) -> Self { ... }
    fn with_fallback(self, fallback: impl Fn() -> AnyElement + 'static) -> Self { ... }
    fn with_loading(self, loading: impl Fn() -> AnyElement + 'static) -> Self { ... }
}
Expand description

Styling methods for image elements, implemented by Img and Stateful<Img>.

Each method returns self, so calls chain after img.

Required Methods§

Source

fn image_style(&mut self) -> &mut ImageStyle

Returns the ImageStyle that the methods on this trait write to.

Provided Methods§

Source

fn grayscale(self, grayscale: bool) -> Self

Draws the image in grayscale when grayscale is true. The default is false.

Source

fn object_fit(self, object_fit: ObjectFit) -> Self

Sets how the image fills its box. The default is ObjectFit::Contain.

The fit matters only when the box’s aspect ratio differs from the image’s, so set both a width and a height. With no size set, the box is the image’s natural size, and every fit looks the same.

§Examples
let avatar = img("images/avatar.png")
    .size(px(48.))
    .rounded_full()
    .object_fit(ObjectFit::Cover);
Source

fn with_fallback(self, fallback: impl Fn() -> AnyElement + 'static) -> Self

Sets the closure that builds the element to show when the image fails to load.

Failures include a missing asset, a non-success HTTP status, bytes that don’t decode, and a URL that the HTTP client can’t fetch. The closure runs again on each layout where the fallback is shown, so keep it cheap.

Source

fn with_loading(self, loading: impl Fn() -> AnyElement + 'static) -> Self

Sets the closure that builds a placeholder to show while the image loads.

The placeholder appears only if loading takes longer than LOADING_DELAY, so a quick load never shows it. The placeholder and the fallback are children of the image element, so the element’s own size and style still apply.

§Examples
let photo = img("https://example.com/photo.jpg")
    .size(px(240.))
    .with_loading(|| {
        div()
            .size(px(240.))
            .bg(rgb(0xe5e7eb))
            .into_any_element()
    })
    .with_fallback(|| {
        div()
            .size(px(240.))
            .flex()
            .items_center()
            .justify_center()
            .child("Image unavailable")
            .into_any_element()
    });

Dyn Compatibility§

This trait is not dyn compatible.

In older versions of Rust, dyn compatibility was called "object safety".

Implementors§