Fix blur width/height

vercel · Aug 29, 2022 · fe74054 · fe74054
1 parent ebbac05
commit fe74054
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 3 deletions.
diff --git a/packages/next/build/webpack/loaders/next-image-loader.js b/packages/next/build/webpack/loaders/next-image-loader.js
@@ -52,7 +52,7 @@ function nextImageLoader(content) {
         const prefix = 'http://localhost'
         const url = new URL(`${basePath || ''}/_next/image`, prefix)
         url.searchParams.set('url', outputPath)
-        url.searchParams.set('w', BLUR_IMG_SIZE)
+        url.searchParams.set('w', blurWidth)
         url.searchParams.set('q', BLUR_QUALITY)
         blurDataURL = url.href.slice(prefix.length)
       } else {

diff --git a/packages/next/server/image-optimizer.ts b/packages/next/server/image-optimizer.ts
@@ -222,7 +222,10 @@ export class ImageOptimizerCache {
       sizes.push(BLUR_IMG_SIZE)
     }
 
-    if (!sizes.includes(width)) {
+    const isValidSize =
+      sizes.includes(width) || (isDev && width <= BLUR_IMG_SIZE)
+
+    if (!isValidSize) {
       return {
         errorMessage: `"w" parameter (width) of ${width} is not allowed`,
       }
@@ -610,7 +613,7 @@ export async function imageOptimizer(
       // End Squoosh transformation logic
     }
     if (optimizedBuffer) {
-      if (isDev && width === BLUR_IMG_SIZE && quality === BLUR_QUALITY) {
+      if (isDev && width <= BLUR_IMG_SIZE && quality === BLUR_QUALITY) {
         // During `next dev`, we don't want to generate blur placeholders with webpack
         // because it can delay starting the dev server. Instead, `next-image-loader.js`
         // will inline a special url to lazily generate the blur placeholder at request time.

diff --git a/test/integration/image-optimizer/test/util.ts b/test/integration/image-optimizer/test/util.ts
@@ -449,6 +449,38 @@ export function runTests(ctx) {
     )
   })
 
+  it('should emit blur svg when width is 8 in dev but not prod', async () => {
+    const query = { url: '/test.png', w: 8, q: 70 }
+    const opts = { headers: { accept: 'image/webp' } }
+    const res = await fetchViaHTTP(ctx.appPort, '/_next/image', query, opts)
+    if (isDev) {
+      expect(res.status).toBe(200)
+      expect(res.headers.get('Content-Type')).toBe('image/svg+xml')
+      expect(await res.text()).toBe(
+        `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><filter id='b' color-interpolation-filters='sRGB'><feGaussianBlur stdDeviation='1'/></filter><image filter='url(#b)' x='0' y='0' height='100%' width='100%' href='data:image/webp;base64,UklGRlIAAABXRUJQVlA4IEYAAACwAQCdASoIAAgAAkA4JaQAAp2cwt8EAP79KbQ0BVm4QoDXIX5ZsWTSXe0tfSlEXLq/vbXjIBhHoY3GzDxxLttmNBFLPQAA'/></svg>`
+      )
+    } else {
+      expect(res.status).toBe(400)
+      expect(await res.text()).toBe(`"w" parameter (width) of 8 is not allowed`)
+    }
+  })
+
+  it('should emit blur svg when width is less than 8 in dev but not prod', async () => {
+    const query = { url: '/test.png', w: 3, q: 70 }
+    const opts = { headers: { accept: 'image/webp' } }
+    const res = await fetchViaHTTP(ctx.appPort, '/_next/image', query, opts)
+    if (isDev) {
+      expect(res.status).toBe(200)
+      expect(res.headers.get('Content-Type')).toBe('image/svg+xml')
+      expect(await res.text()).toBe(
+        `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 3'><filter id='b' color-interpolation-filters='sRGB'><feGaussianBlur stdDeviation='1'/></filter><image filter='url(#b)' x='0' y='0' height='100%' width='100%' href='data:image/webp;base64,UklGRjQAAABXRUJQVlA4ICgAAACQAQCdASoDAAMAAkA4JaQAAudZtgAA/vscq+drfo03+O5Tw/A4AAAA'/></svg>`
+      )
+    } else {
+      expect(res.status).toBe(400)
+      expect(await res.text()).toBe(`"w" parameter (width) of 3 is not allowed`)
+    }
+  })
+
   it('should resize relative url and webp Firefox accept header', async () => {
     const query = { url: '/test.png', w: ctx.w, q: 80 }
     const opts = { headers: { accept: 'image/webp,*/*' } }