Skip to main content

External images

This library can also handle external images. This, like the other features, works at build time and does not affect development speed.


<Image src="" width="1280" height="640" alt="" />

Need to add a setting to export-images.config.js as follows.

module.exports = {
remoteImages: [''],
// remoteImages: async () => {
// const imageUrls = await getImageUrls() // get image urls from CMS, etc.
// return imageUrls
// }

When in production, it will be rendered as follows. (Only important parts are shown.)

srcset="/_next/static/chunks/images/og_1920_75.png 1x, /_next/static/chunks/images/og_3840_75.png 2x"

During development, as with local images, no optimization is performed. Also, no downloading to local is performed.

srcset=" 1x, 2x"