feat: 🚀 Introduced new 'externalOutputDir' config flag

Introduced this flag to allow users to define their own external images
download directory.

docs/docs/04-Configurations/01-basic-configuration.md

@@ -42,6 +42,15 @@ e.g. If `'_optimized'` is set.
 + out/_optimized/filename.png
 ```
 
+### `externalImageDir`
+
+- Type: string
+- Default: '\_next/static/media'
+
+You can customize the directory to output downloaded external images.
+The default is `'_next/static/media'`.
+
+
 ### `basePath`
 
 - Type: string

src/image.tsx

@@ -53,6 +53,9 @@ const exportableLoader: ImageLoader = ({ src: _src, width, quality }) => {
   const outputDir = `/${
     config.imageDir ? config.imageDir.replace(/^\//, '').replace(/\/$/, '') : '_next/static/chunks/images'
   }`
+  const externalOutputDir = `/${
+    config.externalImageDir ? config.externalImageDir.replace(/^\//, '').replace(/\/$/, '') : '_next/static/media'
+  }`
   const filename =
     config.filenameGenerator !== undefined
       ? config.filenameGenerator({ path: pathWithoutName, name, width, quality: quality || 75, extension })
@@ -65,7 +68,7 @@ const exportableLoader: ImageLoader = ({ src: _src, width, quality }) => {
     const path = require('path') as typeof import('path')
 
     if (src.startsWith('http')) {
-      json.src = `/_next/static/media/${src
+      json.src = `/${externalOutputDir}/${src
         .replace(/^https?:\/\//, '')
         .split('/')
         .slice(1)

src/utils/getConfig.ts

@@ -22,6 +22,13 @@ export type Config = {
    *
    * @type {string}
    */
+  externalImageDir?: string
+  /**
+   * You can customize the directory to output downloaded external images.
+   * The default is '_next/static/media'
+   *
+   * @type {string}
+   */
   basePath?: string
   /**
    * You can customize the generation of file names.