Add image example with background color using blurDataURL (#30111)
Demo: https://nextjs-examples-image-component-igy6n5cs1.vercel.sh/
This commit is contained in:
parent
8fa5f34186
commit
dda14e7f4b
5 changed files with 50 additions and 1 deletions
|
@ -152,6 +152,7 @@ Try it out:
|
|||
|
||||
- [Demo the `blur` placeholder](https://image-component.nextjs.gallery/placeholder)
|
||||
- [Demo the shimmer effect with `blurDataURL` prop](https://image-component.nextjs.gallery/shimmer)
|
||||
- [Demo the color effect with `blurDataURL` prop](https://image-component.nextjs.gallery/color)
|
||||
|
||||
## Advanced Props
|
||||
|
||||
|
@ -208,6 +209,7 @@ Try it out:
|
|||
|
||||
- [Demo the default `blurDataURL` prop](https://image-component.nextjs.gallery/placeholder)
|
||||
- [Demo the shimmer effect with `blurDataURL` prop](https://image-component.nextjs.gallery/shimmer)
|
||||
- [Demo the color effect with `blurDataURL` prop](https://image-component.nextjs.gallery/color)
|
||||
|
||||
You can also [generate a solid color Data URL](https://png-pixel.com) to match the image.
|
||||
|
||||
|
|
42
examples/image-component/pages/color.js
Normal file
42
examples/image-component/pages/color.js
Normal file
|
@ -0,0 +1,42 @@
|
|||
import Image from 'next/image'
|
||||
import ViewSource from '../components/view-source'
|
||||
|
||||
// Pixel GIF code adapted from https://stackoverflow.com/a/33919020/266535
|
||||
const keyStr =
|
||||
'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
|
||||
|
||||
const triplet = (e1, e2, e3) =>
|
||||
keyStr.charAt(e1 >> 2) +
|
||||
keyStr.charAt(((e1 & 3) << 4) | (e2 >> 4)) +
|
||||
keyStr.charAt(((e2 & 15) << 2) | (e3 >> 6)) +
|
||||
keyStr.charAt(e3 & 63)
|
||||
|
||||
const rgbDataURL = (r, g, b) =>
|
||||
`data:image/gif;base64,R0lGODlhAQABAPAA${
|
||||
triplet(0, r, g) + triplet(b, 255, 255)
|
||||
}/yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==`
|
||||
|
||||
const Color = () => (
|
||||
<div>
|
||||
<ViewSource pathname="pages/color.js" />
|
||||
<h1>Image Component With Color Data URL</h1>
|
||||
<Image
|
||||
alt="Dog"
|
||||
src="/dog.jpg"
|
||||
placeholder="blur"
|
||||
blurDataURL={rgbDataURL(237, 181, 6)}
|
||||
width={750}
|
||||
height={1000}
|
||||
/>
|
||||
<Image
|
||||
alt="Cat"
|
||||
src="/cat.jpg"
|
||||
placeholder="blur"
|
||||
blurDataURL={rgbDataURL(2, 129, 210)}
|
||||
width={750}
|
||||
height={1000}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default Color
|
|
@ -84,7 +84,12 @@ const Index = () => (
|
|||
</li>
|
||||
<li>
|
||||
<Link href="/shimmer">
|
||||
<a>placeholder="blur" with custom blurDataURL</a>
|
||||
<a>placeholder="blur" with animated shimmer blurDataURL</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/color">
|
||||
<a>placeholder="blur" with solid color blurDataURL</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
BIN
examples/image-component/public/cat.jpg
Normal file
BIN
examples/image-component/public/cat.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 505 KiB |
BIN
examples/image-component/public/dog.jpg
Normal file
BIN
examples/image-component/public/dog.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 370 KiB |
Loading…
Reference in a new issue