fix(common): invalid ImageKit transformation (#49201)

tanoabeleyra · atscott · commit ca5acadb78c3 · 2023-03-27T08:33:22.000-07:00
q-auto is an invalid/unsupported transformation and should not be used PR Close #49201
diff --git a/packages/common/src/directives/ng_optimized_image/image_loaders/imagekit_loader.ts b/packages/common/src/directives/ng_optimized_image/image_loaders/imagekit_loader.ts
@@ -13,7 +13,7 @@ import {createImageLoader, ImageLoaderConfig, ImageLoaderInfo} from './image_loa
  */
 export const imageKitLoaderInfo: ImageLoaderInfo = {
   name: 'ImageKit',
-  testUrl: isImageKitUrl
+  testUrl: isImageKitUrl,
 };
 
 const IMAGE_KIT_LOADER_REGEX = /https?\:\/\/[^\/]+\.imagekit\.io\/.+/;
@@ -39,12 +39,18 @@ export const provideImageKitLoader = createImageLoader(
     createImagekitUrl,
     ngDevMode ? ['https://ik.imagekit.io/mysite', 'https://subdomain.mysite.com'] : undefined);
 
-export function createImagekitUrl(path: string, config: ImageLoaderConfig) {
+export function createImagekitUrl(path: string, config: ImageLoaderConfig): string {
   // Example of an ImageKit image URL:
   // https://ik.imagekit.io/demo/tr:w-300,h-300/medium_cafe_B1iTdD0C.jpg
-  let params = `tr:q-auto`;  // applies the "auto quality" transformation
-  if (config.width) {
-    params += `,w-${config.width}`;
+  const {src, width} = config;
+  let urlSegments: string[];
+
+  if (width) {
+    const params = `tr:w-${width}`;
+    urlSegments = [path, params, src];
+  } else {
+    urlSegments = [path, src];
   }
-  return `${path}/${params}/${config.src}`;
+
+  return urlSegments.join('/');
 }
diff --git a/packages/common/test/image_loaders/image_loader_spec.ts b/packages/common/test/image_loaders/image_loader_spec.ts
@@ -82,7 +82,7 @@ describe('Built-in image directive loaders', () => {
       const loader = createCloudinaryLoader(path);
       expect(loader({src: 'img.png'})).toBe(`${path}/image/upload/f_auto,q_auto/img.png`);
       expect(loader({
-        src: 'marketing/img-2.png'
+        src: 'marketing/img-2.png',
       })).toBe(`${path}/image/upload/f_auto,q_auto/marketing/img-2.png`);
     });
 
@@ -126,8 +126,16 @@ describe('Built-in image directive loaders', () => {
     it('should construct an image loader with the given path', () => {
       const path = 'https://ik.imageengine.io/imagetest';
       const loader = createImageKitLoader(path);
-      expect(loader({src: 'img.png'})).toBe(`${path}/tr:q-auto/img.png`);
-      expect(loader({src: 'marketing/img-2.png'})).toBe(`${path}/tr:q-auto/marketing/img-2.png`);
+      expect(loader({src: 'img.png'})).toBe(`${path}/img.png`);
+      expect(loader({src: 'marketing/img-2.png'})).toBe(`${path}/marketing/img-2.png`);
+    });
+
+    it('should construct an image loader with the given path', () => {
+      const path = 'https://ik.imageengine.io/imagetest';
+      const loader = createImageKitLoader(path);
+      expect(loader({src: 'img.png', width: 100})).toBe(`${path}/tr:w-100/img.png`);
+      expect(loader({src: 'marketing/img-2.png', width: 200}))
+          .toBe(`${path}/tr:w-200/marketing/img-2.png`);
     });
 
     describe('input validation', () => {
@@ -148,13 +156,13 @@ describe('Built-in image directive loaders', () => {
       it('should handle a trailing forward slash on the path', () => {
         const path = 'https://ik.imageengine.io/imagetest';
         const loader = createImageKitLoader(`${path}/`);
-        expect(loader({src: 'img.png'})).toBe(`${path}/tr:q-auto/img.png`);
+        expect(loader({src: 'img.png'})).toBe(`${path}/img.png`);
       });
 
       it('should handle a leading forward slash on the image src', () => {
         const path = 'https://ik.imageengine.io/imagetest';
         const loader = createImageKitLoader(path);
-        expect(loader({src: '/img.png'})).toBe(`${path}/tr:q-auto/img.png`);
+        expect(loader({src: '/img.png'})).toBe(`${path}/img.png`);
       });
     });
   });
