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)