Feat: add onImgLoadError callback prop

Author: AhmeeedMostafa

README.md

@@ -378,6 +378,22 @@ A function to be executed after the image is loaded
   src="dino-reichmuth-1.jpg"
   onImgLoad={(event)=>{ console.log(event); }}/>
 ```
+
+### onImgLoadError
+
+###### Type: **function ({ event, setLoaded }) {}** | Default: **undefined**
+
+A function to be executed after the image is loaded
+
+```jsx
+<Img
+  src="dino-reichmuth-1.jpg"
+  onImgLoadError={({ event, setLoaded })=>{
+    setLoaded(true) // declares whether the image is loaded or not, if `true` - loaded - then assign the proper styles otherwise no need for the loaded styles (useful in-case u added a new src for the image throguh the fallback and want to apply the styles), by default setLoaded(false) is triggered in-case of failure.
+    console.log(event);
+  }} />
+```
+
 ### width
 
 ###### Type: **String** (e.g. 300px, 20vw) | Default: **undefined**

src/Img.js

@@ -24,7 +24,7 @@ function Img(props) {
   const {
     quality = imagesQuality, src, params = imagesParams,
     layout = imagesLayout, objectFit = imagesObjectFit,
-    lowPreviewQuality = imagesLowPreviewQuality, onImgLoad,
+    lowPreviewQuality = imagesLowPreviewQuality, onImgLoad, onImgLoadError,
     width, height, doNotReplaceURL = imagesDoNotReplaceURL,
     className, alt, transitionDuration = imagesTransitionDuration,
     style = {}, ssr = imagesSsr, children, background, objectPosition = imagesObjectPosition,
@@ -68,6 +68,14 @@ function Img(props) {
     }
   };
 
+  const onImageLoadError = (event) => {
+    setLoaded(false)
+
+    if (typeof onImgLoadError === 'function') {
+      onImgLoadError({ event, setLoaded });
+    }
+  }
+
   const processImage = (update, windowScreenBecomesBigger) => {
     const options = {
       src,
@@ -157,6 +165,7 @@ function Img(props) {
           onLoad={onImageLoad}
           loading={lazyload ? 'lazy' : 'eager'}
           alt={_alt}
+          onError={onImageLoadError}
           {...computeImageSize(layout, width, height)}
         />
       ) : (
@@ -168,6 +177,7 @@ function Img(props) {
           style={computeImageStyles(loaded, transitionDuration, objectFit, objectPosition, !previousSrc.current)}
           className={classes.ciSsgImage}
           loading={lazyload ? 'lazy' : 'eager'}
+          onError={onImageLoadError}
         />
       )}