Add dangerously-unoptimized loader for next/image (vercel#26847)

* add support for static loader * update existing test * add test * add prettier-ignore * update docs * apply suggestions from review * remove un-needed normalize * Apply suggestions from code review Co-authored-by: Steven <steven@ceriously.com> * update test Co-authored-by: JJ Kasper <jj@jjsweb.site> Co-authored-by: Steven <steven@ceriously.com>
blitz-js · Jul 7, 2021 · ba29234 · ba29234
1 parent 8695cd5
commit ba29234
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 8 deletions.
diff --git a/docs/basic-features/image-optimization.md b/docs/basic-features/image-optimization.md
@@ -121,6 +121,7 @@ The following Image Optimization cloud providers are included:
 - [Imgix](https://www.imgix.com): `loader: 'imgix'`
 - [Cloudinary](https://cloudinary.com): `loader: 'cloudinary'`
 - [Akamai](https://www.akamai.com): `loader: 'akamai'`
+- dangerously-unoptimized: uses image directly from `src` prop without optimization (only needed with `next export` or when the built-in `_next/image` optimizer can not be leveraged) `loader: 'dangerously-unoptimized'`
 - Default: Works automatically with `next dev`, `next start`, or a custom server
 
 If you need a different provider, you can use the [`loader`](/docs/api-reference/next/image.md#loader) prop with `next/image`.

diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
@@ -36,6 +36,7 @@ const loaders = new Map<
   ['cloudinary', cloudinaryLoader],
   ['akamai', akamaiLoader],
   ['default', defaultLoader],
+  ['dangerously-unoptimized', unoptimizedLoader],
 ])
 
 const VALID_LAYOUT_VALUES = [
@@ -684,6 +685,10 @@ function cloudinaryLoader({
   return `${root}${paramsString}${normalizeSrc(src)}`
 }
 
+function unoptimizedLoader({ src }: DefaultImageLoaderProps): string {
+  return src
+}
+
 function defaultLoader({
   root,
   src,

diff --git a/packages/next/server/image-config.ts b/packages/next/server/image-config.ts
@@ -3,6 +3,7 @@ export const VALID_LOADERS = [
   'imgix',
   'cloudinary',
   'akamai',
+  'dangerously-unoptimized',
 ] as const
 
 export type LoaderValue = typeof VALID_LOADERS[number]

diff --git a/test/integration/export-image-loader/next.config.js b/test/integration/export-image-loader/next.config.js
@@ -1,6 +1,2 @@
-module.exports = {
-  images: {
-    loader: 'cloudinary',
-    path: 'https://example.com/',
-  },
-}
+// prettier-ignore
+module.exports = { /* replaceme */ }
diff --git a/test/integration/export-image-loader/test/index.test.js b/test/integration/export-image-loader/test/index.test.js
@@ -3,13 +3,25 @@
 import fs from 'fs-extra'
 import { join } from 'path'
 import cheerio from 'cheerio'
-import { nextBuild, nextExport } from 'next-test-utils'
+import { nextBuild, nextExport, File } from 'next-test-utils'
 
 jest.setTimeout(1000 * 60 * 5)
 const appDir = join(__dirname, '../')
 const outdir = join(appDir, 'out')
+const nextConfig = new File(join(appDir, 'next.config.js'))
 
 describe('Export with cloudinary loader next/image component', () => {
+  beforeAll(async () => {
+    await nextConfig.replace(
+      '{ /* replaceme */ }',
+      JSON.stringify({
+        images: {
+          loader: 'cloudinary',
+          path: 'https://example.com/',
+        },
+      })
+    )
+  })
   it('should build successfully', async () => {
     await fs.remove(join(appDir, '.next'))
     const { code } = await nextBuild(appDir)
@@ -26,4 +38,41 @@ describe('Export with cloudinary loader next/image component', () => {
     const $ = cheerio.load(html)
     expect($('img[alt="icon"]').attr('alt')).toBe('icon')
   })
+
+  afterAll(async () => {
+    await nextConfig.restore()
+  })
+})
+
+describe('Export with dangerously-unoptimized loader next/image component', () => {
+  beforeAll(async () => {
+    await nextConfig.replace(
+      '{ /* replaceme */ }',
+      JSON.stringify({
+        images: {
+          loader: 'dangerously-unoptimized',
+        },
+      })
+    )
+  })
+  it('should build successfully', async () => {
+    await fs.remove(join(appDir, '.next'))
+    const { code } = await nextBuild(appDir)
+    if (code !== 0) throw new Error(`build failed with status ${code}`)
+  })
+
+  it('should export successfully', async () => {
+    const { code } = await nextExport(appDir, { outdir })
+    if (code !== 0) throw new Error(`export failed with status ${code}`)
+  })
+
+  it('should contain img element with same src in html output', async () => {
+    const html = await fs.readFile(join(outdir, 'index.html'))
+    const $ = cheerio.load(html)
+    expect($('img[alt="icon"]').attr('src')).toBe('/i.png')
+  })
+
+  afterAll(async () => {
+    await nextConfig.restore()
+  })
 })
diff --git a/test/integration/image-optimizer/test/index.test.js b/test/integration/image-optimizer/test/index.test.js
@@ -730,7 +730,7 @@ describe('Image Optimizer', () => {
       await nextConfig.restore()
 
       expect(stderr).toContain(
-        'Specified images.loader should be one of (default, imgix, cloudinary, akamai), received invalid value (notreal)'
+        'Specified images.loader should be one of (default, imgix, cloudinary, akamai, dangerously-unoptimized), received invalid value (notreal)'
       )
     })
   })