Add support number quality on Image Component

vercel · Oct 26, 2020 · 9e17ffc · 9e17ffc
1 parent b90e17e
commit 9e17ffc
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 15 deletions.
diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
@@ -25,7 +25,7 @@ type ImageProps = Omit<
   'src' | 'srcSet' | 'ref' | 'width' | 'height' | 'loading'
 > & {
   src: string
-  quality?: string
+  quality?: number | string
   priority?: boolean
   loading?: LoadingValue
   unoptimized?: boolean
@@ -96,8 +96,8 @@ function getWidthsFromConfig(width: number | undefined) {
 function computeSrc(
   src: string,
   unoptimized: boolean,
-  width: number | undefined,
-  quality?: string
+  width?: number,
+  quality?: number
 ): string {
   if (unoptimized) {
     return src
@@ -110,7 +110,7 @@ function computeSrc(
 type CallLoaderProps = {
   src: string
   width: number
-  quality?: string
+  quality?: number
 }
 
 function callLoader(loaderProps: CallLoaderProps) {
@@ -121,8 +121,8 @@ function callLoader(loaderProps: CallLoaderProps) {
 type SrcSetData = {
   src: string
   unoptimized: boolean
-  width: number | undefined
-  quality: string | undefined
+  width?: number
+  quality?: number
 }
 
 function generateSrcSet({
@@ -146,7 +146,7 @@ type PreloadData = {
   unoptimized: boolean
   width: number | undefined
   sizes?: string
-  quality?: string
+  quality?: number
 }
 
 function generatePreload({
@@ -242,8 +242,10 @@ export default function Image({
     }
   }, [thisEl, lazy])
 
-  let widthInt = getInt(width)
-  let heightInt = getInt(height)
+  const widthInt = getInt(width)
+  const heightInt = getInt(height)
+  const qualityInt = getInt(quality)
+
   let divStyle: React.CSSProperties | undefined
   let imgStyle: React.CSSProperties | undefined
   let wrapperStyle: React.CSSProperties | undefined
@@ -296,12 +298,12 @@ export default function Image({
   }
 
   // Generate attribute values
-  const imgSrc = computeSrc(src, unoptimized, widthInt, quality)
+  const imgSrc = computeSrc(src, unoptimized, widthInt, qualityInt)
   const imgSrcSet = generateSrcSet({
     src,
     width: widthInt,
     unoptimized,
-    quality,
+    quality: qualityInt,
   })
 
   let imgAttributes:
@@ -343,7 +345,7 @@ export default function Image({
               width: widthInt,
               unoptimized,
               sizes,
-              quality,
+              quality: qualityInt,
             })
           : ''}
         <img
@@ -433,7 +435,5 @@ function defaultLoader({ root, src, width, quality }: LoaderProps): string {
     }
   }
 
-  return `${root}?url=${encodeURIComponent(src)}&w=${width}&q=${
-    quality || '100'
-  }`
+  return `${root}?url=${encodeURIComponent(src)}&w=${width}&q=${quality || 100}`
 }
diff --git a/test/integration/image-component/typescript/pages/valid.tsx b/test/integration/image-component/typescript/pages/valid.tsx
@@ -22,6 +22,18 @@ const Page = () => {
         src="https://via.placeholder.com/100"
         unsized
       ></Image>
+      <Image
+        id="quality-num"
+        src="https://via.placeholder.com/500"
+        quality={80}
+        unsized
+      ></Image>
+      <Image
+        id="quality-str"
+        src="https://via.placeholder.com/500"
+        quality="80"
+        unsized
+      ></Image>
       <p id="stubtext">This is valid usage of the Image component</p>
     </div>
   )