chore: update changelog and version to 5.0.1; fix responsive image handling in Image component

Author: manu4543

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 5.0.1
+
+Fix `src` when `responsive:false` is set.
+
 ## 5.0.0
 
 This is a major release that includes breaking changes. Please refer to the [official documentation](https://imagekit.io/docs/integration/react) for up-to-date usage instructions.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@imagekit/react",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "description": "React SDK for ImageKit.io which implements client-side upload and URL generation for use inside a react application.",
   "scripts": {
     "build:js": "rollup -c",

package.json

@@ -1,4 +1,4 @@
-import { getResponsiveImageAttributes, type GetImageAttributesOptions } from "@imagekit/javascript";
+import { getResponsiveImageAttributes, buildSrc, type GetImageAttributesOptions } from "@imagekit/javascript";
 import React, { useContext } from "react";
 import type { SrcProps } from "../interface";
 import { ImageKitContext } from "../provider/ImageKit";
@@ -76,6 +76,24 @@ export const Image = (props: IKImageProps) => {
 
   const widthInt = getInt(nonIKParams.width);
 
+  if (!responsive) {
+    const nonResponsiveSrc = buildSrc({
+      src,
+      transformation,
+      queryParameters,
+      urlEndpoint,
+      transformationPosition,
+    });
+
+    return (
+      <img
+        {...nonIKParams}
+        loading={loading}
+        src={nonResponsiveSrc}
+      />
+    )
+  }
+
   const { src: newSrc, srcSet } = getResponsiveImageAttributes({
     src,
     transformation,
@@ -88,16 +106,6 @@ export const Image = (props: IKImageProps) => {
     imageBreakpoints,
   })
 
-  if (!responsive) {
-    return (
-      <img
-        {...nonIKParams}
-        loading={loading}
-        src={newSrc}
-      />
-    )
-  }
-
   return (
     <img
       {...nonIKParams}

src/components/Image.tsx

@@ -1 +1 @@
-<div class="container"><div><h1>Image</h1><img alt="Image without ImageKit provider" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max"><img alt="Image with ImageKit provider" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max"><img alt="Image with width not number, should produce larger srcset" width="300px" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max"><img alt="With transformation" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:w-640,c-at_max"><img alt="Image with queryParameters" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:w-640,c-at_max"><img alt="Responsive image with sizes" height="300" width="300" loading="lazy" sizes="(max-width: 600px) 100vw, 50vw" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 384w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max"><img alt="Responsive image with sizes - should have very large srcset for all breakpoints" height="300" width="300" loading="lazy" sizes="300px" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-16,c-at_max 16w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-32,c-at_max 32w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-48,c-at_max 48w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-64,c-at_max 64w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-96,c-at_max 96w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-128,c-at_max 128w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-256,c-at_max 256w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 384w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max"><img alt="Image with urlEndpoint override" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo2/default-image.jpg?tr=h-100,w-100:w-384,c-at_max 1x, https://ik.imagekit.io/demo2/default-image.jpg?tr=h-100,w-100:w-640,c-at_max 2x" src="https://ik.imagekit.io/demo2/default-image.jpg?tr=h-100,w-100:w-640,c-at_max"><img alt="Image with className" class="custom-class" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max"><img alt="Image with lazy loading eager" height="300" width="300" loading="eager" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max"><img alt="Image with path transformation" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/tr:w-384,c-at_max/default-image.jpg 1x, https://ik.imagekit.io/demo/tr:w-640,c-at_max/default-image.jpg 2x" src="https://ik.imagekit.io/demo/tr:w-640,c-at_max/default-image.jpg"><img alt="Image with path transformation + custom transformations" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/tr:h-100,w-100:w-384,c-at_max/default-image.jpg 1x, https://ik.imagekit.io/demo/tr:h-100,w-100:w-640,c-at_max/default-image.jpg 2x" src="https://ik.imagekit.io/demo/tr:h-100,w-100:w-640,c-at_max/default-image.jpg"><img alt="path not respected with absolute url" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max"><img alt="No width" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max"><img alt="Custom deviceBreakpoints" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,c-at_max 200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-400,c-at_max 400w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-800,c-at_max 800w" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-800,c-at_max"><img alt="Image with responsive off" height="300" width="300" loading="lazy" src="https://ik.imagekit.io/demo/default-image.jpg?tr=n-restrict-unnamed:w-3840,c-at_max"><h1>Video</h1><video title="Video without ImageKit provider" height="300" width="300" controls="" src="https://ik.imagekit.io/demo/sample-video.mp4"></video><video title="Video with ImageKit provider" height="300" width="300" controls="" src="https://ik.imagekit.io/demo/sample-video.mp4"></video><video title="Video with transformations" height="300" width="300" controls="" src="https://ik.imagekit.io/demo/sample-video.mp4?tr=h-100,w-100"></video><video title="Video with all props" height="300" width="300" controls="" autoplay="" loop="" playsinline="" preload="none" poster="https://ik.imagekit.io/demo/default-image.jpg" src="https://ik.imagekit.io/demo/sample-video.mp4"></video><video title="Video with urlEndpoint override" height="300" width="300" controls="" src="https://ik.imagekit.io/demo2/sample-video.mp4?tr=h-100,w-100"></video><video title="Video with path transformation" height="300" width="300" src="https://ik.imagekit.io/demo/tr:h-100,w-100/sample-video.mp4"></video></div></div>
+<div class="container"><div><h1>Image</h1><img alt="Image without ImageKit provider" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max"><img alt="Image with ImageKit provider" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max"><img alt="Image with width not number, should produce larger srcset" width="300px" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max"><img alt="With transformation" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:w-640,c-at_max"><img alt="Image with queryParameters" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:w-640,c-at_max"><img alt="Responsive image with sizes" height="300" width="300" loading="lazy" sizes="(max-width: 600px) 100vw, 50vw" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 384w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max"><img alt="Responsive image with sizes - should have very large srcset for all breakpoints" height="300" width="300" loading="lazy" sizes="300px" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-16,c-at_max 16w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-32,c-at_max 32w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-48,c-at_max 48w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-64,c-at_max 64w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-96,c-at_max 96w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-128,c-at_max 128w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-256,c-at_max 256w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 384w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max"><img alt="Image with urlEndpoint override" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo2/default-image.jpg?tr=h-100,w-100:w-384,c-at_max 1x, https://ik.imagekit.io/demo2/default-image.jpg?tr=h-100,w-100:w-640,c-at_max 2x" src="https://ik.imagekit.io/demo2/default-image.jpg?tr=h-100,w-100:w-640,c-at_max"><img alt="Image with className" class="custom-class" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max"><img alt="Image with lazy loading eager" height="300" width="300" loading="eager" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max"><img alt="Image with path transformation" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/tr:w-384,c-at_max/default-image.jpg 1x, https://ik.imagekit.io/demo/tr:w-640,c-at_max/default-image.jpg 2x" src="https://ik.imagekit.io/demo/tr:w-640,c-at_max/default-image.jpg"><img alt="Image with path transformation + custom transformations" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/tr:h-100,w-100:w-384,c-at_max/default-image.jpg 1x, https://ik.imagekit.io/demo/tr:h-100,w-100:w-640,c-at_max/default-image.jpg 2x" src="https://ik.imagekit.io/demo/tr:h-100,w-100:w-640,c-at_max/default-image.jpg"><img alt="path not respected with absolute url" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max"><img alt="No width" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max"><img alt="Custom deviceBreakpoints" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,c-at_max 200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-400,c-at_max 400w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-800,c-at_max 800w" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-800,c-at_max"><img alt="Image with responsive off" height="300" width="300" loading="lazy" src="https://ik.imagekit.io/demo/default-image.jpg?tr=n-restrict-unnamed"><h1>Video</h1><video title="Video without ImageKit provider" height="300" width="300" controls="" src="https://ik.imagekit.io/demo/sample-video.mp4"></video><video title="Video with ImageKit provider" height="300" width="300" controls="" src="https://ik.imagekit.io/demo/sample-video.mp4"></video><video title="Video with transformations" height="300" width="300" controls="" src="https://ik.imagekit.io/demo/sample-video.mp4?tr=h-100,w-100"></video><video title="Video with all props" height="300" width="300" controls="" autoplay="" loop="" playsinline="" preload="none" poster="https://ik.imagekit.io/demo/default-image.jpg" src="https://ik.imagekit.io/demo/sample-video.mp4"></video><video title="Video with urlEndpoint override" height="300" width="300" controls="" src="https://ik.imagekit.io/demo2/sample-video.mp4?tr=h-100,w-100"></video><video title="Video with path transformation" height="300" width="300" src="https://ik.imagekit.io/demo/tr:h-100,w-100/sample-video.mp4"></video></div></div>