feat(img): deprecate ion-img

BREAKING.md

@@ -32,13 +32,27 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 
 This section details the desktop browser, JavaScript framework, and mobile platform versions that are supported by Ionic 9.
 
+**Minimum Browser Versions**
+| Desktop Browser | Supported Versions |
+| --------------- | ------------------ |
+| Chrome          | 89+                |
+| Safari          | 16+                |
+| Edge            | 89+                |
+| Firefox         | 75+                |
+
 **Minimum JavaScript Framework Versions**
 | Framework | Supported Version     |
 | --------- | --------------------- |
 | Angular   | 18+                   |
 | React     | 18+                   |
 | Vue       | 3.5+                  |
 
+**Minimum Mobile Platform Versions**
+| Platform | Supported Version      |
+| -------- | ---------------------- |
+| iOS      | 16+                    |
+| Android  | 5.1+ with Chromium 89+ |
+
 <h2 id="version-9x-package-exports">Package Exports</h2>
 
 `@ionic/core`'s `package.json` now declares an `exports` field. Subpaths like `@ionic/core/components` and `@ionic/core/loader` previously failed under Node ESM (Angular 21's default Vitest builder, raw Node, etc.) with `ERR_UNSUPPORTED_DIR_IMPORT`, because the strict ESM resolver doesn't read the nested `package.json` files this package relied on. The new `exports` map declares the documented subpaths explicitly.

core/src/components.d.ts

@@ -1239,6 +1239,9 @@ export namespace Components {
          */
         "translucent": boolean;
     }
+    /**
+     * @deprecated 
+     */
     interface IonImg {
         /**
           * This attribute defines the alternative text describing the image. Users will see this text displayed if the image URL is wrong, the image is not in one of the supported formats, or if the image is not yet downloaded.
@@ -4203,6 +4206,9 @@ declare global {
         "ionImgDidLoad": void;
         "ionError": void;
     }
+    /**
+     * @deprecated 
+     */
     interface HTMLIonImgElement extends Components.IonImg, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIonImgElementEventMap>(type: K, listener: (this: HTMLIonImgElement, ev: IonImgCustomEvent<HTMLIonImgElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -6386,6 +6392,9 @@ declare namespace LocalJSX {
          */
         "translucent"?: boolean;
     }
+    /**
+     * @deprecated 
+     */
     interface IonImg {
         /**
           * This attribute defines the alternative text describing the image. Users will see this text displayed if the image URL is wrong, the image is not in one of the supported formats, or if the image is not yet downloaded.
@@ -9812,6 +9821,9 @@ declare module "@stencil/core" {
             "ion-footer": LocalJSX.IntrinsicElements["ion-footer"] & JSXBase.HTMLAttributes<HTMLIonFooterElement>;
             "ion-grid": LocalJSX.IntrinsicElements["ion-grid"] & JSXBase.HTMLAttributes<HTMLIonGridElement>;
             "ion-header": LocalJSX.IntrinsicElements["ion-header"] & JSXBase.HTMLAttributes<HTMLIonHeaderElement>;
+            /**
+             * @deprecated 
+             */
             "ion-img": LocalJSX.IntrinsicElements["ion-img"] & JSXBase.HTMLAttributes<HTMLIonImgElement>;
             "ion-infinite-scroll": LocalJSX.IntrinsicElements["ion-infinite-scroll"] & JSXBase.HTMLAttributes<HTMLIonInfiniteScrollElement>;
             "ion-infinite-scroll-content": LocalJSX.IntrinsicElements["ion-infinite-scroll-content"] & JSXBase.HTMLAttributes<HTMLIonInfiniteScrollContentElement>;

core/src/components/img/img.tsx

@@ -2,10 +2,13 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core';
 import type { Attributes } from '@utils/helpers';
 import { inheritAttributes } from '@utils/helpers';
+import { printIonWarning } from '@utils/logging';
 
 import { getIonMode } from '../../global/ionic-global';
 
 /**
+ * @deprecated
+ *
  * @part image - The inner `img` element.
  */
 @Component({
@@ -54,6 +57,11 @@ export class Img implements ComponentInterface {
   }
 
   componentDidLoad() {
+    printIonWarning(
+      '[ion-img] - This component is deprecated and will be removed in Ionic v10. ' +
+        'Use a native <img> with the loading="lazy" attribute instead.',
+      this.el
+    );
     this.addIO();
   }