Cheatsheet for Next.js Image Component with common use cases
After the introduction of the Image component in Next.js version 10, it is rare to use Next.js with the regular <img /> component and is now even considered incorrect! This Article is to help you learn and remember the most common uses cases for the Next.js Image component.
Quick Cheatsheet:
1. with predefined width and height:
import Image from 'next/image' import example from '../asset/myimage.png' const Example = () => { return ( <Image src={example} alt="Alt text for the picture" width="350px" height="300px" /> ) 2. with predefined width and height with layout prop:
With the layout prop, you get 5 options:
'fill'
'responsive'
'intrinsic'
'fixed'
and now 'raw'
import Image from 'next/image' import example from '../asset/myimage.png' const Example = () => { return ( <Image src={example} alt="Alt text for the picture" width="350px" height="300px" layout="responsive" /> ) with layout fill (dynamic image size)
import Image from 'next/image' import example from '../asset/myimage.png' const Example = () => { return ( <Image src={example} alt="Alt text for the picture" layout="fill" objectFit="cover" quality={100} /> ) 3. styling using Tailwind CSS
import Image from 'next/image' import example from '../asset/myimage.png' const Example = () => { return ( <div className="relative w-24 h-24 border border-gray-200 rounded-md overflow-hidden"> <Image src={product.image} alt={product.title} layout="fill" objectFit="cover" /> </div> ) 4. Next.js Image as a background image
import Image from 'next/image' import example from '../asset/myimage.png' const Background = () => ( <div> <ViewSource pathname="pages/background.js" /> <div className="fixed h-screen w-screen overflow-hidden -z-10"> <Image alt="Mountains" src="/mountains.jpg" layout="fill" objectFit="cover" quality={100} /> </div> </div> ) In the comments below, suggest some of your own favorite/most common use cases!
Learn more about Next.js at BuildNextShop.com
Top comments (0)