✨ feat: add image component

examples/basic/src/app.rs

@@ -31,6 +31,9 @@ pub fn App(cx: Scope) -> impl IntoView {
                     <Route path="/input" view=move |cx| view! {cx,
                         <InputPage />
                     } />
+                    <Route path="/image" view=move |cx| view! {cx,
+                        <ImagePage />
+                    } />
                 </Route>
             </Routes>
             <Routes base="/mobile".to_string()>

examples/basic/src/pages/components.rs

@@ -37,6 +37,7 @@ pub fn ComponentsPage(cx: Scope) -> impl IntoView {
                     <MenuItem key="slider" label="slider" />
                     <MenuItem key="tabbar" label="tabbar" />
                     <MenuItem key="input" label="input" />
+                    <MenuItem key="image" label="image" />
                 </Menu>
             </aside>
             <main>

examples/basic/src/pages/image/mod.rs

@@ -0,0 +1,12 @@
+use leptos::*;
+use melt_ui::*;
+
+#[component]
+pub fn ImagePage(cx: Scope) -> impl IntoView {
+    view! { cx,
+        <>
+            <Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="500px"/>
+            <Image width="200px" height="200px"/>
+        </>
+    }
+}

examples/basic/src/pages/mod.rs

@@ -1,5 +1,6 @@
 mod components;
 mod home;
+mod image;
 mod input;
 mod menu;
 mod mobile;
@@ -8,6 +9,7 @@ mod tabbar;
 
 pub use components::*;
 pub use home::*;
+pub use image::*;
 pub use input::*;
 pub use menu::*;
 pub use mobile::*;

src/image/mod.rs

@@ -0,0 +1,39 @@
+
+use leptos::*;
+
+#[component]
+pub fn Image(
+    cx: Scope,
+    #[prop(optional, into)] src: MaybeSignal<String>,
+    #[prop(optional, into)] alt: MaybeSignal<String>,
+    #[prop(optional, into)] width: MaybeSignal<String>,
+    #[prop(optional, into)] height: MaybeSignal<String>,
+    #[prop(optional, into)] border_radius: MaybeSignal<String>,
+    #[prop(optional, into)] object_fit: MaybeSignal<String>,
+) -> impl IntoView {
+
+    let style = move || {
+        let mut style = String::new();
+
+        let width = width.get();
+        if !width.is_empty() {
+            style.push_str(&format!("width: {width};"))
+        }
+
+        let height = height.get();
+        if !height.is_empty() {
+            style.push_str(&format!("height: {height};"))
+        }
+        
+        let border_radius = border_radius.get();
+        if !border_radius.is_empty() {
+            style.push_str(&format!("border-radius: {border_radius};"))
+        }
+
+        style
+    };
+    view! {
+        cx,
+        <img src=move || src.get()  alt=move || alt.get() style=style object_fit=move || object_fit.get()/>
+    }
+}

src/lib.rs

@@ -2,6 +2,7 @@ mod button;
 mod card;
 mod checkbox;
 mod components;
+mod image;
 mod input;
 mod menu;
 pub mod mobile;
@@ -17,6 +18,7 @@ mod wave;
 
 pub use button::*;
 pub use checkbox::*;
+pub use image::*;
 pub use input::*;
 pub use menu::*;
 pub use modal::*;