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"
/>
)
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"
/>
)
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}
/>
)
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>
)
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>
)
Within the feedback beneath, counsel a few of your individual favourite/commonest use circumstances!
Be taught extra about Subsequent.js at BuildNextShop.com
