Rushing Labs

Handling images (next/image)

Next Images (next/image)

Taken from this link, and other tutorials I've tried to work through, it appears that we only need two lines to use images with the new Next.js component.

Ref: https://welearncode.com/isr/

import Image from 'next/image'

<Image src='/blair.jpeg' alt='Fluffy white dog lying on a couch' height={200} width={150} />

However, doing it this way looks like we're required to include images locally, in the resulting site build. So, over time, this would inflate the bundle size for something like a blog, where we need another image with almost every post.

So, how to accomplish it with externally hosted images?

External Images§

A simple change, with an extra config in next.config.js. Without this addition to the config, you'll run into an "Un-configured Host" error, as described here.

Ref: https://nextjs.org/docs/messages/next-image-unconfigured-host

some-component.js

import Image from 'next/image'

<Image src="https://your-domain-here.com/2021/some-screenshot.png"
    alt="My special screenshot" height={300} width={450} />

next.config.js

module.exports = {
    images: {
        domains: ['your-domain-here.com']
    }
}
RushingLabs - Analytics