Skip to content
Permalink
Browse files

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

resolves #16947
  • Loading branch information...
pickfire authored and liamdebeasi committed Mar 27, 2019
1 parent 352797e commit 04f931f6940441f820309b102fb80eed4c0f8ecf
@@ -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']);
@@ -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
@@ -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;
/**
@@ -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}
/>
);
}
@@ -79,9 +79,10 @@ export default Example

## Events

| Event | Description | Type |
| --------------- | ---------------------------------- | ------------------- |
| `ionImgDidLoad` | Emitted when the img src is loaded | `CustomEvent<void>` |
| Event | Description | Type |
| --------------- | ------------------------------------- | ------------------- |
| `ionError` | Emitted when the img fails to load | `CustomEvent<void>` |
| `ionImgDidLoad` | Emitted when the img src has been set | `CustomEvent<void>` |


----------------------------------------------
@@ -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>

0 comments on commit 04f931f

Please sign in to comment.
You can’t perform that action at this time.