feat: add image component with radius control

AppImage.qml

@@ -0,0 +1,37 @@
+import QtQuick
+import QtQuick.Effects
+
+Item {
+  property alias source: sourceItem.source
+  property alias fillMode: sourceItem.fillMode
+  property alias radius: rect.radius
+
+  Image {
+    id: sourceItem
+    anchors.fill: parent
+    visible: false
+  }
+
+  MultiEffect {
+    source: sourceItem
+    anchors.fill: sourceItem
+    maskEnabled: true
+    maskSource: mask
+  }
+
+  Item {
+    id: mask
+    width: sourceItem.width
+    height: sourceItem.height
+    layer.enabled: true
+    visible: false
+
+    Rectangle {
+      id: rect
+      width: sourceItem.width
+      height: sourceItem.height
+      radius: 10
+      color: "black"
+    }
+  }
+}

CMakeLists.txt

@@ -25,6 +25,7 @@ set(plain_qml_files
   AppWindow.qml
   AppComboBox.qml
   AppTextField.qml
+  AppImage.qml
 )
 set(qml_singletons
   Fonts.qml

gallery/Main.qml

@@ -97,5 +97,13 @@ AppWindow {
       AppTextField {
         placeholderText: qsTr("Enter name")
       }
+
+      AppImage {
+        source: "https://storage.googleapis.com/flowy-assets/keypad/jr-korpa-9XngoIpxcEo-unsplash.jpg"
+        fillMode: Image.PreserveAspectCrop
+        height: 100
+        width: 100
+        radius: 20
+      }
     }
 }