6b73acfaf5
- use the nextv12 example from the storybook-addon-next repo as the with-storybook example found here: 6583c20803/examples/nextv12
- update the readme for the example to include details on what the example includes
- tweak the example from the `storybook-addon-next` repo to work with type checking and linting
Resolves #33889
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
## Context
This was kindly requested by @leerob in [this issue](https://github.com/RyanClementsHax/storybook-addon-next/issues/3) on the `storybook-addon-next` repo.
P.S. thanks to @leerob for making [this video](https://www.youtube.com/watch?v=cuoNzXFLitc&t=1502s). I found it very helpful for getting me up to speed with how to contribute. I hope I did everything right for y'all. Lmk if there was something I could have done better.
29 lines
789 B
JavaScript
29 lines
789 B
JavaScript
import { Links } from 'components/Links'
|
|
import Image from 'next/image'
|
|
import Head from 'next/head'
|
|
import nyanCatImgSrc from 'public/nyan-cat.png'
|
|
|
|
export default function NextjsImages() {
|
|
return (
|
|
<div>
|
|
<Head>
|
|
<title>Nextjs Images</title>
|
|
<link rel="icon" href="/favicon.ico" />
|
|
</Head>
|
|
<Links />
|
|
<main>
|
|
<h2>This image uses a remote image</h2>
|
|
<Image src="/vercel.svg" alt="Vercel Logo" width={200} height={200} />
|
|
<h2>This image uses a static import with a "placeholder="blur"</h2>
|
|
<Image
|
|
src={nyanCatImgSrc}
|
|
layout="responsive"
|
|
objectFit="cover"
|
|
objectPosition="center"
|
|
placeholder="blur"
|
|
alt="Nyan Cat"
|
|
/>
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|