Docs: Explain a bit more the image type with more examples

slint-ui · Dec 23, 2024 · d6f83a2 · d6f83a2
1 parent e125da1
commit d6f83a2
Showing 1 changed file with 29 additions and 3 deletions.
diff --git a/docs/astro/src/content/docs/reference/primitive-types.mdx b/docs/astro/src/content/docs/reference/primitive-types.mdx
@@ -106,31 +106,57 @@ RGB color with an alpha channel, with 8 bit precision for each channel. CSS colo
 <SlintProperty propName="image" typeName="image" defaultValue='empty image'>
 
 The `image` type is a reference to an image. It's defined using the `@image-url("...")` construct.
-The address within the `@image-url` function must be known at compile time.
+The address within the `@image-url` function must be a string literal and the image is resolved at compile time.
 
 Slint looks for images in the following places:
 
 1. The absolute path or the path relative to the current `.slint` file.
 2. The include path used by the compiler to look up `.slint` files.
 
+Loading image from `http` is only supported in [SlintPad](https://slintpad.com).
+
 Access an `image`'s dimension using its `width` and `height` properties.
 
 ```slint
 export component Example inherits Window {
     preferred-width: 150px;
     preferred-height: 50px;
 
+    // Note: http URL only work on the web version.
     in property <image> some_image: @image-url("https://slint.dev/logo/slint-logo-full-light.svg");
 
-    Text {
-        text: "The image is " + some_image.width + "x" + some_image.height;
+    HorizontalLayout {
+        Text {
+            text: "The image is " + some_image.width + "x" + some_image.height;
+        }
+
+        // Check the size to find out if the image is empty.
+        if some_image.width > 0 : Image {
+            source: some_image
+        }
     }
 }
 ```
 
 It is also possible to load images supporting [9 slice scaling](https://en.wikipedia.org/wiki/9-slice_scaling) (also called nine patch or border images)
 by adding a  `nine-slice(...)` argument. The argument can have either one, two, or four numbers that specifies the size of the edges.
 The numbers are either `top right bottom left` or `vertical horizontal`, or one number for everything
+
+```slint
+// nine-slice scaling
+export component Example inherits Window {
+    width: 100px;
+    height: 150px;
+    VerticalLayout {
+        Image {
+            source: @image-url("https://interactive-examples.mdn.mozilla.net/media/examples/border-diamonds.png", nine-slice(30 30 30 30));
+        }
+    }
+}
+```
+
+See also the <Link type="Image" label="Image element"/>.
+
 </SlintProperty>
 
 ## Animation