dioxus_element_plug/components/
image.rs

1use dioxus::prelude::*;
2
3/// Image fit type
4#[derive(Clone, PartialEq)]
5pub enum ImageFit {
6    Fill,
7    Contain,
8    Cover,
9    None,
10    ScaleDown,
11}
12
13impl ImageFit {
14    pub fn as_str(&self) -> &'static str {
15        match self {
16            ImageFit::Fill => "fill",
17            ImageFit::Contain => "contain",
18            ImageFit::Cover => "cover",
19            ImageFit::None => "none",
20            ImageFit::ScaleDown => "scale-down",
21        }
22    }
23}
24
25/// Image props
26#[derive(Props, Clone, PartialEq)]
27pub struct ImageProps {
28    /// Image source URL
29    pub src: String,
30
31    /// Alt text
32    #[props(default)]
33    pub alt: Option<String>,
34
35    /// Image fit type
36    #[props(default = ImageFit::Cover)]
37    pub fit: ImageFit,
38
39    /// Whether to lazy load
40    #[props(default = false)]
41    pub lazy: bool,
42
43    /// Preview src list
44    #[props(default)]
45    pub preview_src_list: Vec<String>,
46
47    /// Whether to hide click handler for preview
48    #[props(default = true)]
49    pub preview: bool,
50
51    /// Placeholder content while loading
52    #[props(default)]
53    pub placeholder: Option<String>,
54
55    /// Error content
56    #[props(default)]
57    pub error: Option<String>,
58
59    /// Additional CSS classes
60    #[props(default)]
61    pub class: Option<String>,
62
63    /// Inline styles
64    #[props(default)]
65    pub style: Option<String>,
66}
67
68/// Image component with preview support
69#[component]
70pub fn Image(props: ImageProps) -> Element {
71    let mut class_names = vec!["el-image".to_string()];
72    if let Some(ref c) = props.class { class_names.push(c.clone()); }
73    let class_string = class_names.join(" ");
74    let fit_str = props.fit.as_str();
75
76    rsx! {
77        div {
78            class: "{class_string}",
79            style: props.style.clone().unwrap_or_default(),
80            img {
81                class: "el-image__inner",
82                src: "{props.src}",
83                alt: props.alt.clone().unwrap_or_default(),
84                style: "object-fit: {fit_str};",
85                loading: if props.lazy { "lazy" } else { "eager" },
86            }
87        }
88    }
89}
dioxus_element_plug/components/image.rs

dioxus_element_plug/components/
image.rs
