Skip to content

Commit

Permalink
fix(image): preload should respect crossOrigin (#40676)
Browse files Browse the repository at this point in the history
## Bug

- [ ] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`

Currently, `link[rel=preload]` inserted by `priority` will not have the `crossOrigin` attribute, which will cause the preloaded response not to be used, since the CORS policy mismatches. The PR fixes that.
  • Loading branch information
SukkaW authored Sep 19, 2022
1 parent db3b844 commit 4a53582
Show file tree
Hide file tree
Showing 6 changed files with 45 additions and 2 deletions.
6 changes: 5 additions & 1 deletion packages/next/client/future/image.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -825,10 +825,14 @@ export default function Image({
imageSrcSetPropName = 'imageSrcSet'
imageSizesPropName = 'imageSizes'
}
const linkProps = {
const linkProps: React.DetailedHTMLProps<
React.LinkHTMLAttributes<HTMLLinkElement>,
HTMLLinkElement
> = {
// Note: imagesrcset and imagesizes are not in the link element type with react 17.
[imageSrcSetPropName]: imgAttributes.srcSet,
[imageSizesPropName]: imgAttributes.sizes,
crossOrigin: rest.crossOrigin,
}

const onLoadingCompleteRef = useRef(onLoadingComplete)
Expand Down
6 changes: 5 additions & 1 deletion packages/next/client/image.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -978,10 +978,14 @@ export default function Image({
imageSrcSetPropName = 'imageSrcSet'
imageSizesPropName = 'imageSizes'
}
const linkProps = {
const linkProps: React.DetailedHTMLProps<
React.LinkHTMLAttributes<HTMLLinkElement>,
HTMLLinkElement
> = {
// Note: imagesrcset and imagesizes are not in the link element type with react 17.
[imageSrcSetPropName]: imgAttributes.srcSet,
[imageSizesPropName]: imgAttributes.sizes,
crossOrigin: rest.crossOrigin,
}

const useLayoutEffect =
Expand Down
8 changes: 8 additions & 0 deletions test/integration/image-component/default/pages/priority.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,14 @@ const Page = () => {
width="400"
height="400"
></Image>
<Image
priority
id="basic-image-with-crossorigin"
crossOrigin="anonymous"
src="/test.jpg"
width="400"
height="400"
></Image>
<Image
loading="eager"
id="load-eager"
Expand Down
12 changes: 12 additions & 0 deletions test/integration/image-component/default/test/index.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,11 @@ function runTests(mode) {
expect(
await browser.elementById('basic-image').getAttribute('loading')
).toBe(null)
expect(
await browser
.elementById('basic-image-with-crossorigin')
.getAttribute('loading')
).toBe(null)
expect(
await browser.elementById('load-eager').getAttribute('loading')
).toBe(null)
Expand All @@ -157,6 +162,13 @@ function runTests(mode) {
expect(warnings).not.toMatch(
/was detected as the Largest Contentful Paint/gm
)

// should preload with crossorigin
expect(
await browser.elementsByCss(
'link[rel=preload][as=image][crossorigin=anonymous][imagesrcset*="test.jpg"]'
)
).toHaveLength(1)
} finally {
if (browser) {
await browser.close()
Expand Down
8 changes: 8 additions & 0 deletions test/integration/image-future/default/pages/priority.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,14 @@ const Page = () => {
width="400"
height="400"
></Image>
<Image
priority
id="basic-image-crossorigin"
src="/test.jpg"
width="400"
height="400"
crossOrigin="anonymous"
></Image>
<Image
loading="eager"
id="load-eager"
Expand Down
7 changes: 7 additions & 0 deletions test/integration/image-future/default/test/index.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,13 @@ function runTests(mode) {
expect(warnings).not.toMatch(
/was detected as the Largest Contentful Paint/gm
)

// should preload with crossorigin
expect(
await browser.elementsByCss(
'link[rel=preload][as=image][crossorigin=anonymous][imagesrcset*="test.jpg"]'
)
).toHaveLength(1)
} finally {
if (browser) {
await browser.close()
Expand Down

0 comments on commit 4a53582

Please sign in to comment.