Add better error message, add webp

Author: styfle

errors/placeholder-blur-data-url.md

@@ -0,0 +1,11 @@
+# `placeholder=blur` without `blurDataURL`
+
+#### Why This Error Occurred
+
+You are attempting use the `next/image` component with `placeholder=blur` property but no `blurDataURL` property.
+
+#### Possible Ways to Fix It
+
+- Add a [`blurDataURL`](https://nextjs.org/docs/api-reference/next/image#blurdataurl) property, the contents should be a small Data URL to represent the image
+- Change the [`src`](https://nextjs.org/docs/api-reference/next/image#src) property to a static import with one of the supported file types: jpg, png, or webp
+- Remove the [`placeholder`](https://nextjs.org/docs/api-reference/next/image#placeholder) property, effectively no blur effect

packages/next/build/webpack/loaders/next-image-loader.js

@@ -3,7 +3,8 @@ import sizeOf from 'image-size'
 import { processBuffer } from '../../../next-server/server/lib/squoosh/main'
 
 const BLUR_IMG_SIZE = 8
-const VALID_IMAGE_TYPES = ['jpeg', 'png']
+const BLUR_QUALITY = 70
+const VALID_BLUR_EXT = ['jpeg', 'png', 'webp']
 
 async function nextImageLoader(content) {
   const context = this.rootContext
@@ -21,8 +22,8 @@ async function nextImageLoader(content) {
 
   const imageSize = sizeOf(content)
   let blurDataURL
-  if (VALID_IMAGE_TYPES.includes(extension)) {
-    // Shrink the image's largest dimension to 6 pixels
+  if (VALID_BLUR_EXT.includes(extension)) {
+    // Shrink the image's largest dimension
     const resizeOperationOpts =
       imageSize.width >= imageSize.height
         ? { type: 'resize', width: BLUR_IMG_SIZE }
@@ -31,7 +32,7 @@ async function nextImageLoader(content) {
       content,
       [resizeOperationOpts],
       extension,
-      70
+      BLUR_QUALITY
     )
     blurDataURL = `data:image/${extension};base64,${resizedImage.toString(
       'base64'

packages/next/client/image.tsx

@@ -329,9 +329,7 @@ export default function Image({
         )}`
       )
     }
-    if (staticImageData.blurDataURL) {
-      blurDataURL = staticImageData.blurDataURL
-    }
+    blurDataURL = blurDataURL || staticImageData.blurDataURL
     staticSrc = staticImageData.src
     if (!layout || layout !== 'fill') {
       height = height || staticImageData.height
@@ -385,8 +383,17 @@ export default function Image({
         )
       }
       if (!blurDataURL) {
+        const VALID_BLUR_EXT = ['jpeg', 'png', 'webp'] // should match next-image-loader
+
         throw new Error(
-          `Image with src "${src}" has "placeholder='blur'" property but is missing the "blurDataURL" property.`
+          `Image with src "${src}" has "placeholder='blur'" property but is missing the "blurDataURL" property.
+          Possible solutions:
+            - Add a "blurDataURL" property, the contents should be a small Data URL to represent the image
+            - Change the "src" property to a static import with one of the supported file types: ${VALID_BLUR_EXT.join(
+              ','
+            )}
+            - Remove the "placeholder" property, effectively no blur effect
+          Read more: https://nextjs.org/docs/messages/placeholder-blur-data-url`
         )
       }
     }

test/integration/image-component/default/pages/invalid-placeholder-blur-static.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import Image from 'next/image'
+import testBMP from '../public/test.bmp'
+
+const Page = () => {
+  return (
+    <div>
+      <Image
+        id="invalid-placeholder-blur-static"
+        src={testBMP}
+        placeholder="blur"
+      />
+    </div>
+  )
+}
+
+export default Page

test/integration/image-component/default/pages/static.js

@@ -4,23 +4,13 @@ import Image from 'next/image'
 
 import testJPG from '../public/test.jpg'
 import testPNG from '../public/test.png'
+import testWEBP from '../public/test.webp'
 import testSVG from '../public/test.svg'
 import testGIF from '../public/test.gif'
 import testBMP from '../public/test.bmp'
 import testICO from '../public/test.ico'
-import testWEBP from '../public/test.webp'
 
 import TallImage from '../components/TallImage'
-const testFiles = [
-  testJPG,
-  testPNG,
-  testSVG,
-  testGIF,
-  testBMP,
-  testICO,
-  testWEBP,
-]
-
 const Page = () => {
   return (
     <div>
@@ -46,9 +36,14 @@ const Page = () => {
         width="400"
         height="300"
       />
-      {testFiles.map((f, i) => (
-        <Image id={`format-test-${i}`} key={i} src={f} placeholder="blur" />
-      ))}
+      <br />
+      <Image id="blur-png" src={testPNG} placeholder="blur" />
+      <Image id="blur-jpg" src={testJPG} placeholder="blur" />
+      <Image id="blur-webp" src={testWEBP} placeholder="blur" />
+      <Image id="static-svg" src={testSVG} />
+      <Image id="static-gif" src={testGIF} />
+      <Image id="static-bmp" src={testBMP} />
+      <Image id="static-ico" src={testICO} />
     </div>
   )
 }

test/integration/image-component/default/test/index.test.js

@@ -494,6 +494,18 @@ function runTests(mode) {
       )
     })
 
+    it('should show invalid placeholder when blurDataUrl is missing', async () => {
+      const browser = await webdriver(
+        appPort,
+        '/invalid-placeholder-blur-static'
+      )
+
+      expect(await hasRedbox(browser)).toBe(true)
+      expect(await getRedboxHeader(browser)).toMatch(
+        /Image with src "(.*)bmp" has "placeholder='blur'" property but is missing the "blurDataURL" property/
+      )
+    })
+
     it('should warn when using a very small image with placeholder=blur', async () => {
       const browser = await webdriver(appPort, '/small-img-import')
 

test/integration/image-component/default/test/static.test.js

@@ -22,13 +22,12 @@ const indexPage = new File(join(appDir, 'pages/static.js'))
 const runTests = () => {
   it('Should allow an image with a static src to omit height and width', async () => {
     expect(await browser.elementById('basic-static')).toBeTruthy()
-    expect(await browser.elementById('format-test-0')).toBeTruthy()
-    expect(await browser.elementById('format-test-1')).toBeTruthy()
-    expect(await browser.elementById('format-test-2')).toBeTruthy()
-    expect(await browser.elementById('format-test-3')).toBeTruthy()
-    expect(await browser.elementById('format-test-4')).toBeTruthy()
-    expect(await browser.elementById('format-test-5')).toBeTruthy()
-    expect(await browser.elementById('format-test-6')).toBeTruthy()
+    expect(await browser.elementById('blur-png')).toBeTruthy()
+    expect(await browser.elementById('blur-jpg')).toBeTruthy()
+    expect(await browser.elementById('static-svg')).toBeTruthy()
+    expect(await browser.elementById('static-gif')).toBeTruthy()
+    expect(await browser.elementById('static-bmp')).toBeTruthy()
+    expect(await browser.elementById('static-ico')).toBeTruthy()
   })
   it('Should automatically provide an image height and width', async () => {
     expect(html).toContain('width:400px;height:300px')