rsnext/test/integration/image-component/default/pages/priority.js
Joe Haddad 45b87aa23a
feat(next/image): preload priority images (#20615)
The HTML Living Standard explicitly says `href` should be omitted to prevent the loading of an incorrectly sized image:
https://html.spec.whatwg.org/multipage/semantics.html#attr-link-imagesrcset

![image](https://user-images.githubusercontent.com/616428/103378205-8a013800-4aaf-11eb-9085-10f547263fed.png)

Since it's in the spec, I assume this is valid-enough HTML.

This also dedupes preloads which the old implementation did not.

---

Fixes #18756
x-ref #19118
Fixes #18720
2020-12-30 21:10:28 +00:00

43 lines
813 B
JavaScript

import React from 'react'
import Image from 'next/image'
const Page = () => {
return (
<div>
<p>Priority Page</p>
<Image
priority
id="basic-image"
src="/test.jpg"
width="400"
height="400"
></Image>
<Image
loading="eager"
id="basic-image"
src="/test.png"
width="400"
height="400"
></Image>
<Image
priority
id="responsive1"
src="/wide.png"
width="1200"
height="700"
layout="responsive"
/>
<Image
priority
id="responsive2"
src="/wide.png"
width="1200"
height="700"
layout="responsive"
/>
<p id="stubtext">This is the priority page</p>
</div>
)
}
export default Page