Create Neo.component.Image #7244

Author: tobiu

.github/ISSUE/ticket-add-release-notes-to-kb.md

@@ -3,7 +3,7 @@
 GH ticket id: #7241
 
 **Assignee:** Gemini
-**Status:** To Do
+**Status:** Done
 
 ## Description
 

.github/ISSUE/ticket-create-image-component.md

@@ -0,0 +1,36 @@
+# Ticket: Create Neo.component.Image
+
+GH ticket id: #7244
+
+**Assignee:** Gemini
+**Status:** Done
+
+## Description
+
+Create a new class, `Neo.component.Image`, to provide a classic Object-Oriented Programming (OOP) interface for the `<img>` HTML tag. This component will serve as a foundational building block and demonstrate best practices for reactive configs.
+
+## Rationale
+
+While an `<img>` tag can be created directly in a VDOM tree, a dedicated component class offers significant advantages:
+
+-   **Reactivity:** It provides reactive `src` and `alt` configs, allowing these properties to be updated via data binding.
+-   **Lazy Loading:** The reactive `src` config is a key enabler for advanced behaviors like lazy loading images (e.g., based on an Intersection Observer) by updating the `src` at runtime.
+-   **Encapsulation:** It encapsulates image-specific logic and provides a clear, reusable API.
+
+## Scope of Work
+
+1.  Create a new file: `src/component/Image.mjs`.
+2.  The new `Image` class should extend `Neo.component.Base`.
+3.  The `static config` should include:
+    -   `className`: `Neo.component.Image`
+    -   `ntype`: `image`
+    -   `tag`: `'img'` (This will inherit reactivity from `Neo.component.Base`)
+    -   `alt_`: `null` (reactive)
+    -   `src_`: `null` (reactive)
+4.  Implement `afterSetAlt()` and `afterSetSrc()` hooks to update the component's VDOM when the `alt` and `src` configs are changed.
+
+## Acceptance Criteria
+
+-   The `Neo.component.Image` class is created at the specified path.
+-   The component correctly renders an `<img>` tag.
+-   Changing the `src` and `alt` configs programmatically updates the rendered `<img>` tag's attributes.

src/component/Image.mjs

@@ -0,0 +1,78 @@
+import Component from './Base.mjs';
+
+/**
+ * @summary A component to render an `<img>` tag with reactive `src` and `alt` attributes.
+ *
+ * This component provides a simple, object-oriented wrapper for the native `<img>` element,
+ * allowing its `src` and `alt` text to be updated dynamically via the config system.
+ *
+ * This is a key component for data-binding scenarios, such as displaying an image from a store record
+ * or implementing lazy-loading by updating the `src` config at runtime.
+ *
+ * @example
+ * // Basic usage
+ * Neo.create({
+ *     module: Image,
+ *     alt   : 'A beautiful landscape',
+ *     src   : 'https://www.neomjs.com/resources/images/logo.png'
+ * });
+ *
+ * @class Neo.component.Image
+ * @extends Neo.component.Base
+ */
+class Image extends Component {
+    static config = {
+        /**
+         * @member {String} className='Neo.component.Image'
+         * @protected
+         */
+        className: 'Neo.component.Image',
+        /**
+         * @member {String} ntype='image'
+         * @protected
+         */
+        ntype: 'image',
+        /**
+         * The alt attribute for the image.
+         * @member {String|null} alt_=null
+         * @reactive
+         */
+        alt_: null,
+        /**
+         * The src attribute for the image.
+         * @member {String|null} src_=null
+         * @reactive
+         */
+        src_: null,
+        /**
+         * The HTML tag for this component.
+         * @member {String} tag='img'
+         * @reactive
+         */
+        tag: 'img'
+    }
+
+    /**
+     * Hook that fires after the `alt` config has been changed.
+     * Updates the `alt` attribute in the component's VDOM.
+     * @param {String|null} value The new value
+     * @param {String|null} oldValue The old value
+     * @protected
+     */
+    afterSetAlt(value, oldValue) {
+        this.changeVdomRootKey('alt', value)
+    }
+
+    /**
+     * Hook that fires after the `src` config has been changed.
+     * Updates the `src` attribute in the component's VDOM.
+     * @param {String|null} value The new value
+     * @param {String|null} oldValue The old value
+     * @protected
+     */
+    afterSetSrc(value, oldValue) {
+        this.changeVdomRootKey('src', value)
+    }
+}
+
+export default Neo.setupClass(Image);