e5d0a30a2e
Some fairly minor changes to the image-component example app. Switches all instances of images from `/public` over to use static images and adds a page with an example image with blurry placeholder enabled.
32 lines
889 B
JavaScript
32 lines
889 B
JavaScript
import Image from 'next/image'
|
|
import ViewSource from '../components/view-source'
|
|
import mountains from '../public/mountains.jpg'
|
|
|
|
const Fill = () => (
|
|
<div>
|
|
<ViewSource pathname="pages/layout-fill.js" />
|
|
<h1>Image Component With Layout Fill</h1>
|
|
<div style={{ position: 'relative', width: '300px', height: '500px' }}>
|
|
<Image alt="Mountains" src={mountains} layout="fill" objectFit="cover" />
|
|
</div>
|
|
<div style={{ position: 'relative', width: '300px', height: '500px' }}>
|
|
<Image
|
|
alt="Mountains"
|
|
src={mountains}
|
|
layout="fill"
|
|
objectFit="contain"
|
|
/>
|
|
</div>
|
|
<div style={{ position: 'relative', width: '300px', height: '500px' }}>
|
|
<Image
|
|
alt="Mountains"
|
|
src={mountains}
|
|
layout="fill"
|
|
objectFit="none"
|
|
quality={100}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
export default Fill
|