Next.js Image Component Cheatsheet – DEV Community

Cheatsheet for Subsequent.js Picture Element with widespread use circumstances

After the introduction of the Picture part in Subsequent.js model 10, it’s uncommon to make use of Subsequent.js with the common <img /> part and is now even thought of incorrect! This Article is that can assist you be taught and keep in mind the most typical makes use of circumstances for the Subsequent.js Picture part.



Fast Cheatsheet:

1. with predefined width and top:

import Picture from 'subsequent/picture'
import instance from '../asset/myimage.png'

const Instance = () => {
  return (
    <Picture
      src={instance}
      alt="Alt textual content for the image"
      width="350px"
      top="300px"
    />
)

Enter fullscreen mode

Exit fullscreen mode

2. with predefined width and top with structure prop:

With the structure prop, you get 5 choices:

‘fill’
‘responsive’
‘intrinsic’
‘mounted’
and now ‘uncooked’

import Picture from 'subsequent/picture'
import instance from '../asset/myimage.png'

const Instance = () => {
  return (
    <Picture
      src={instance}
      alt="Alt textual content for the image"
      width="350px"
      top="300px"
      structure="responsive" 
  />
)
Enter fullscreen mode

Exit fullscreen mode

with structure fill (dynamic picture measurement)

import Picture from 'subsequent/picture'
import instance from '../asset/myimage.png'

const Instance = () => {
  return (
    <Picture
        src={instance}
        alt="Alt textual content for the image"
        structure="fill"
        objectFit="cowl"
        high quality={100}
   />
)
Enter fullscreen mode

Exit fullscreen mode

3. styling utilizing Tailwind CSS

import Picture from 'subsequent/picture'
import instance from '../asset/myimage.png'

const Instance = () => {
  return (
    <div className="relative w-24 h-24 border border-gray-200 rounded-md overflow-hidden">
        <Picture
           src={product.picture}
           alt={product.title}
           structure="fill"
           objectFit="cowl"
       />
    </div>
)
Enter fullscreen mode

Exit fullscreen mode

4. Subsequent.js Picture as a background picture

import Picture from 'subsequent/picture'
import instance from '../asset/myimage.png'

const Background = () => (
  <div>
    <ViewSource pathname="pages/background.js" />
    <div className="mounted h-screen w-screen overflow-hidden
  -z-10">
      <Picture
        alt="Mountains"
        src="https://style-tricks.com/mountains.jpg"
        structure="fill"
        objectFit="cowl"
        high quality={100}
      />
    </div>
  </div>
)

Enter fullscreen mode

Exit fullscreen mode

Within the feedback beneath, counsel a few of your individual favourite/commonest use circumstances!

Be taught extra about Subsequent.js at BuildNextShop.com

Add a Comment

Your email address will not be published. Required fields are marked *