07adc8ef26
This PR updates the `<Image>` component to follow the same property naming as native `<img>`. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#attr-loading This currently allows two values,`loading=lazy` and `loading=eager`, but there might be new values added in a future spec. cc @atcastle
63 lines
1.3 KiB
JavaScript
63 lines
1.3 KiB
JavaScript
import React from 'react'
|
|
import Image from 'next/image'
|
|
import Link from 'next/link'
|
|
|
|
const ClientSide = () => {
|
|
return (
|
|
<div>
|
|
<p id="stubtext">This is a client side page</p>
|
|
<Image
|
|
id="basic-image"
|
|
src="foo.jpg"
|
|
loading="eager"
|
|
width={300}
|
|
height={400}
|
|
quality={60}
|
|
></Image>
|
|
<Image
|
|
id="attribute-test"
|
|
data-demo="demo-value"
|
|
src="bar.jpg"
|
|
loading="eager"
|
|
width={300}
|
|
height={400}
|
|
/>
|
|
<Image
|
|
id="secondary-image"
|
|
data-demo="demo-value"
|
|
host="secondary"
|
|
src="foo2.jpg"
|
|
loading="eager"
|
|
width={300}
|
|
height={400}
|
|
/>
|
|
<Image
|
|
id="unoptimized-image"
|
|
unoptimized
|
|
src="https://arbitraryurl.com/foo.jpg"
|
|
loading="eager"
|
|
width={300}
|
|
height={400}
|
|
/>
|
|
<Image
|
|
id="priority-image-client"
|
|
priority
|
|
src="withpriorityclient.png"
|
|
width={300}
|
|
height={400}
|
|
/>
|
|
<Image
|
|
id="preceding-slash-image"
|
|
src="/fooslash.jpg"
|
|
priority
|
|
width={300}
|
|
height={400}
|
|
/>
|
|
<Link href="/errors">
|
|
<a id="errorslink">Errors</a>
|
|
</Link>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ClientSide
|