Merge pull request #24187 from json-betsec/fix-next-image-search-params

NextJS: Fix default next image loader when src has params
storybookjs · Oct 5, 2023 · 4e11f29 · 4e11f29
2 parents 7d8a2c6 + 74040b7
commit 4e11f29
Showing 1 changed file with 13 additions and 2 deletions.
diff --git a/code/frameworks/nextjs/src/images/next-image-default-loader.tsx b/code/frameworks/nextjs/src/images/next-image-default-loader.tsx
@@ -1,6 +1,6 @@
 import type * as _NextImage from 'next/image';
 
-export const defaultLoader = ({ src, width, quality }: _NextImage.ImageLoaderProps) => {
+export const defaultLoader = ({ src, width, quality = 75 }: _NextImage.ImageLoaderProps) => {
   const missingValues = [];
   if (!src) {
     missingValues.push('src');
@@ -24,5 +24,16 @@ export const defaultLoader = ({ src, width, quality }: _NextImage.ImageLoaderPro
     );
   }
 
-  return `${src}?w=${width}&q=${quality ?? 75}`;
+  const url = new URL(src, window.location.href);
+
+  if (!url.searchParams.has('w') && !url.searchParams.has('q')) {
+    url.searchParams.set('w', width.toString());
+    url.searchParams.set('q', quality.toString());
+  }
+
+  if (!src.startsWith('http://') && !src.startsWith('https://')) {
+    return url.toString().slice(url.origin.length);
+  }
+
+  return url.toString();
 };