diff --git a/docs/docs/04-Configurations/01-basic-configuration.md b/docs/docs/04-Configurations/01-basic-configuration.md index c84e1e60..1d399d60 100644 --- a/docs/docs/04-Configurations/01-basic-configuration.md +++ b/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 diff --git a/src/image.tsx b/src/image.tsx index fc6e5b1a..d19a8ed8 100644 --- a/src/image.tsx +++ b/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) diff --git a/src/utils/getConfig.ts b/src/utils/getConfig.ts index 053042f8..4a96fc84 100644 --- a/src/utils/getConfig.ts +++ b/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.