feat: add load and error events to cldimage (#96)

Author: codercatdev

docs/src/docs/components/cldimage/usage.md

@@ -146,6 +146,59 @@ To preserve those transformations, you can apply the `preserveTransformations` p
 />
 ```
 
+## Events
+
+You can capture both the `on:load` and `on:error` events to take actions when your image loads.
+
+In this working example you will see "Turtle has loaded" in the console.
+
+```svelte
+<CldImage
+  width="960"
+  height="600"
+  src={`images/turtle`}
+  sizes="100vw"
+  alt="Turtle in the ocean"
+	on:load={() => console.log("Turtle has loaded.")}
+  on:error={()=>console.error("Turtle Error")}
+/>
+```
+
+<CldImage
+  width="960"
+  height="600"
+  src={`images/turtle`}
+  sizes="100vw"
+  alt="Turtle in the ocean"
+	on:load={() => console.log("Turtle has loaded.")}
+  on:error={()=>console.error("Turtle Error")}
+/>
+
+In this broken example you will see "Turtle Error" in the console.
+
+```svelte
+<CldImage
+  width="960"
+  height="600"
+  src={`images/turtle-broken`}
+  sizes="100vw"
+  alt="Broken Turtle Image"
+	on:load={() => console.log("Turtle has loaded.")}
+  on:error={()=>console.error("Turtle Error")}
+/>
+```
+
+<CldImage
+  width="960"
+  height="600"
+  src={`images/turtle-broken`}
+  sizes="100vw"
+  alt="Broken Turtle Image"
+	on:load={() => console.log("Turtle has loaded.")}
+  on:error={()=>console.error("Turtle Error")}
+/>
+
+
 ## Watch & Learn
 
 <Video

svelte-cloudinary/src/lib/components/CldImage.svelte

@@ -79,5 +79,7 @@
 		transformer={(loaderOptions) => {
 			return cloudinaryLoader( { loaderOptions, imageProps, cldOptions: {...cldOptions, width: imageProps.width }, cldConfig: config });
 		}}
+		on:load
+		on:error
 	/>
 {/if}