chore(docs): fix a few typos in image loader docs (#52508)

The `quality` is not always defined. so it must have a default value before calling `.toString()` Closes NEXT-1421
vercel · Jul 11, 2023 · 6731075 · 6731075
1 parent 63a6cda
commit 6731075
Showing 1 changed file with 9 additions and 10 deletions.
diff --git a/docs/02-app/02-api-reference/05-next-config-js/images.mdx b/docs/02-app/02-api-reference/05-next-config-js/images.mdx
@@ -82,11 +82,11 @@ export default function cloudflareLoader({ src, width, quality }) {
 
 ```js
 // Docs: https://www.contentful.com/developers/docs/references/images-api/
-export default function contentfulLoader({ src, quality, width }) {
+export default function contentfulLoader({ src, width, quality }) {
   const url = new URL(`https://example.com${src}`)
   url.searchParams.set('fm', 'webp')
   url.searchParams.set('w', width.toString())
-  url.searchParams.set('q', quality.toString() || '75')
+  url.searchParams.set('q', (quality || 75).toString())
   return url.href
 }
 ```
@@ -99,7 +99,7 @@ export default function fastlyLoader({ src, width, quality }) {
   const url = new URL(`https://example.com${src}`)
   url.searchParams.set('auto', 'webp')
   url.searchParams.set('width', width.toString())
-  url.searchParams.set('quality', quality.toString() || '75')
+  url.searchParams.set('quality', (quality || 75).toString())
   return url.href
 }
 ```
@@ -112,7 +112,7 @@ export default function gumletLoader({ src, width, quality }) {
   const url = new URL(`https://example.com${src}`)
   url.searchParams.set('format', 'auto')
   url.searchParams.set('w', width.toString())
-  url.searchParams.set('q', quality.toString() || '75')
+  url.searchParams.set('q', (quality || 75).toString())
   return url.href
 }
 ```
@@ -138,7 +138,7 @@ export default function imgixLoader({ src, width, quality }) {
   params.set('auto', params.getAll('auto').join(',') || 'format')
   params.set('fit', params.get('fit') || 'max')
   params.set('w', params.get('w') || width.toString())
-  params.set('q', quality.toString() || '50')
+  params.set('q', (quality || 50).toString())
   return url.href
 }
 ```
@@ -157,11 +157,10 @@ export default function thumborLoader({ src, width, quality }) {
 
 ```js
 // Docs: https://supabase.com/docs/guides/storage/image-transformations#nextjs-loader
-const projectId = '' // your supabase project id
-
 export default function supabaseLoader({ src, width, quality }) {
-  return `https://${projectId}.supabase.co/storage/v1/render/image/public/${src}?width=${width}&quality=${
-    quality || 75
-  }`
+  const url = new URL(`https://example.com${src}`)
+  url.searchParams.set('width', width.toString())
+  url.searchParams.set('quality', (quality || 75).toString())
+  return url.href
 }
 ```