fix: patch update, patch missing srcset on unpic Image component

Author: matiasfha

docs/src/routes/+page.svx

@@ -24,7 +24,7 @@ images
 <ImageGrid>
 	<li>
 		<CldImage
-			width="987"
+                        layout="fullWidth"
 			height="1481"
 			src="images/woman-headphones"
 			alt="Original image of images/woman with headphones"

docs/src/routes/components/CldImage/responsive-images/+page.svx

@@ -103,7 +103,7 @@ You can use `aspectRatio` prop instead of using both `width` and `height` at the
     />
 
 
-br />
+<br />
 <br />
 <br />
 

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

@@ -62,16 +62,23 @@
 			console.warn(`Failed to preserve transformations: ${(e as Error).message}`);
 		}
 	}
-	$: console.log();
+	const url = getCldImageUrl({
+		...imageProps,
+		...cldOptions,
+	})
 </script>
 
 <Image
 	{...$$props}
 	{...imageProps}
-	transformer={() =>
-		getCldImageUrl({
+	transformer={({ width, url, height}) => {
+		return 	getCldImageUrl({
 			...imageProps,
 			...cldOptions,
-			...{ width: $$props.width ? $$props.width : '100%' }
+			width,
+			height,
+			src:url
 		})}
+	}
+	src={url}
 />

svelte-cloudinary/src/routes/+page.svelte

@@ -5,69 +5,67 @@
 <CldImage
 	height={1200}
 	src="images/woman-headphones"
-	crop="thumb"
 	removeBackground
 	tint="70:blue:green:purple"
 	underlay="images/city-skyline"
 	sizes="100vw"
 	alt="Description of my image"
 	layout="fullWidth"
 />
-<CldImage
-	width={1200}
-	height={1200}
-	src="images/woman-headphones"
-	crop="thumb"
-	removeBackground
-	tint="70:blue:green:purple"
-	underlay="images/city-skyline"
-	sizes="100vw"
-	alt="Description of my image"
-/>
-
-<CldImage
-	width={987}
-	height={987}
-	src="images/woman-headphones"
-	sizes="50vw"
-	crop="thumb"
-	tint="40:253f8c"
-	gravity="faces"
-	underlay="images/city-skyline"
-	overlays={[
-		{
-			position: {
-				gravity: 'north',
-				y: 60
-			},
-			text: {
-				color: 'rgb:52a4ff80',
-				fontFamily: 'Source Sans Pro',
-				fontSize: 320,
-				fontWeight: 'black',
-				text: 'MUSIC',
-				letterSpacing: -10,
-				lineSpacing: -100,
-				stroke: true,
-				border: '20px_solid_rgb:2d0eff99'
-			}
-		},
-		{
-			position: {
-				gravity: 'south',
-				y: 60
-			},
-			text: {
-				color: 'rgb:52a4ff80',
-				fontFamily: 'Source Sans Pro',
-				fontSize: 320,
-				fontWeight: 'black',
-				text: 'IS LIFE',
-				letterSpacing: -10,
-				lineSpacing: -100,
-				stroke: true,
-				border: '20px_solid_rgb:2d0eff99'
-			}
-		}
-	]}
-/>
+<!-- <CldImage -->
+<!-- 	width={1200} -->
+<!-- 	height={1200} -->
+<!-- 	src="images/woman-headphones" -->
+<!-- 	crop="thumb" -->
+<!-- 	removeBackground -->
+<!-- 	tint="70:blue:green:purple" -->
+<!-- 	underlay="images/city-skyline" -->
+<!-- 	alt="Description of my image" -->
+<!-- /> -->
+<!---->
+<!-- <CldImage -->
+<!-- 	width={987} -->
+<!-- 	height={987} -->
+<!-- 	src="images/woman-headphones" -->
+<!-- 	sizes="50vw" -->
+<!-- 	crop="thumb" -->
+<!-- 	tint="40:253f8c" -->
+<!-- 	gravity="faces" -->
+<!-- 	underlay="images/city-skyline" -->
+<!-- 	overlays={[ -->
+<!-- 		{ -->
+<!-- 			position: { -->
+<!-- 				gravity: 'north', -->
+<!-- 				y: 60 -->
+<!-- 			}, -->
+<!-- 			text: { -->
+<!-- 				color: 'rgb:52a4ff80', -->
+<!-- 				fontFamily: 'Source Sans Pro', -->
+<!-- 				fontSize: 320, -->
+<!-- 				fontWeight: 'black', -->
+<!-- 				text: 'MUSIC', -->
+<!-- 				letterSpacing: -10, -->
+<!-- 				lineSpacing: -100, -->
+<!-- 				stroke: true, -->
+<!-- 				border: '20px_solid_rgb:2d0eff99' -->
+<!-- 			} -->
+<!-- 		}, -->
+<!-- 		{ -->
+<!-- 			position: { -->
+<!-- 				gravity: 'south', -->
+<!-- 				y: 60 -->
+<!-- 			}, -->
+<!-- 			text: { -->
+<!-- 				color: 'rgb:52a4ff80', -->
+<!-- 				fontFamily: 'Source Sans Pro', -->
+<!-- 				fontSize: 320, -->
+<!-- 				fontWeight: 'black', -->
+<!-- 				text: 'IS LIFE', -->
+<!-- 				letterSpacing: -10, -->
+<!-- 				lineSpacing: -100, -->
+<!-- 				stroke: true, -->
+<!-- 				border: '20px_solid_rgb:2d0eff99' -->
+<!-- 			} -->
+<!-- 		} -->
+<!-- 	]} -->
+<!-- /> -->