feat(img): add ionError event (#17134)

resolves #16947

angular/src/directives/proxies.ts

@@ -294,11 +294,12 @@ export declare interface IonImg extends StencilComponents<'IonImg'> {}
 @Component({ selector: 'ion-img', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['alt', 'src'] })
 export class IonImg {
   ionImgDidLoad!: EventEmitter<CustomEvent>;
+  ionError!: EventEmitter<CustomEvent>;
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['ionImgDidLoad']);
+    proxyOutputs(this, this.el, ['ionImgDidLoad', 'ionError']);
   }
 }
 proxyInputs(IonImg, ['alt', 'src']);

core/api.txt

@@ -380,6 +380,7 @@ ion-header,prop,translucent,boolean,false,false,false
 ion-img,shadow
 ion-img,prop,alt,string | undefined,undefined,false,false
 ion-img,prop,src,string | undefined,undefined,false,false
+ion-img,event,ionError,void,true
 ion-img,event,ionImgDidLoad,void,true
 
 ion-infinite-scroll-content,none

core/src/components.d.ts

@@ -1546,7 +1546,11 @@ export namespace Components {
     */
     'alt'?: string;
     /**
-    * Emitted when the img src is loaded
+    * Emitted when the img fails to load
+    */
+    'onIonError'?: (event: CustomEvent<void>) => void;
+    /**
+    * Emitted when the img src has been set
     */
     'onIonImgDidLoad'?: (event: CustomEvent<void>) => void;
     /**

core/src/components/img/img.tsx

@@ -13,6 +13,8 @@ export class Img implements ComponentInterface {
 
   @State() loadSrc?: string;
 
+  @State() loadError?: () => void;
+
   /**
    * This attribute defines the alternative text describing the image.
    * Users will see this text displayed if the image URL is wrong,
@@ -29,9 +31,12 @@ export class Img implements ComponentInterface {
     this.addIO();
   }
 
-  /** Emitted when the img src is loaded */
+  /** Emitted when the img src has been set */
   @Event() ionImgDidLoad!: EventEmitter<void>;
 
+  /** Emitted when the img fails to load */
+  @Event() ionError!: EventEmitter<void>;
+
   componentDidLoad() {
     this.addIO();
   }
@@ -60,10 +65,15 @@ export class Img implements ComponentInterface {
   }
 
   private load() {
+    this.loadError = this.onError;
     this.loadSrc = this.src;
     this.ionImgDidLoad.emit();
   }
 
+  private onError = () => {
+    this.ionError.emit();
+  }
+
   private removeIO() {
     if (this.io) {
       this.io.disconnect();
@@ -77,6 +87,7 @@ export class Img implements ComponentInterface {
         src={this.loadSrc}
         alt={this.alt}
         decoding="async"
+        onError={this.loadError}
       />
     );
   }

core/src/components/img/readme.md

@@ -80,8 +80,9 @@ export default Example
 ## Events
 
 | Event           | Description                           | Type                |
-| --------------- | ---------------------------------- | ------------------- |
-| `ionImgDidLoad` | Emitted when the img src is loaded | `CustomEvent<void>` |
+| --------------- | ------------------------------------- | ------------------- |
+| `ionError`      | Emitted when the img fails to load    | `CustomEvent<void>` |
+| `ionImgDidLoad` | Emitted when the img src has been set | `CustomEvent<void>` |
 
 
 ----------------------------------------------

core/src/components/img/test/basic/index.html

@@ -31,6 +31,13 @@
       <f></f>
       <f></f>
       <ion-img id="hidden" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAARQAQMAAAA2ut43AAAABlBMVEXMzMz////TjRV2AAAEPUlEQVR42u3RMREAMBDDsPAn/eXhavOq87Ztu7u7+6eBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBf2hvgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgatgn4GBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGr7S0wMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDBwFewzMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwcLW9BQYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBq6CfQYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgautrfAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAVbDPwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwNX2FhgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGLgK9hkYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBi42t4CAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDV8E+AwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDA1fbW2BgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYOAq2GdgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGDgansLDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMXAX7DAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDFxtb4GBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGrYJ+BgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBq+0tMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwcBXsMzAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMHC1vQUGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgaugn0GBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGjvYD5WuYrpZqdmcAAAAASUVORK5CYII="></ion-img>
+      <f></f>
+      <f></f>
+      <f></f>
+      <f></f>
+      <f></f>
+      <f></f>
+      <ion-img id="hidden" src="data:image/png;base64,"></ion-img>
 
     </ion-content>
 
@@ -63,6 +70,10 @@
     document.body.addEventListener('ionImgDidLoad', (event) => {
       console.log('image did load', event.target);
     });
+
+    document.body.addEventListener('ionError', (event) => {
+      console.error('image error', event.target);
+    });
   </script>
 </body>