`<NuxtPicture preload>` ignores `crossorigin` in the preload link
Maintainers usually reply within 1 day
Nobody has claimed this yet.
- #2361 by @RaphaelFakhri — closed without merging
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 73/100
- Issue type
- Bug
- Clarity
- Clearly specified
- Activity status
- Active
- Tech stack
- nuxt, typescript
- Domain
- frontend
Research direction
The issue identifies NuxtPicture.vue as the component that needs attention and points to the earlier NuxtImg fix in #1836 for comparison. Read the preload-link generation in NuxtPicture.vue and check how it receives crossorigin from the rendered image or img-attrs. Done means the preload link uses the same crossorigin value as the image; verify with the supplied reproduction.
Written by the indexing model from the issue text.
Description
Environment
@nuxt/image 2.2.0, also on main (5bd8766).
Reproduction
<NuxtPicture
src="https://images.example.com/hero.jpg"
width="500"
height="500"
crossorigin="anonymous"
preload
/>
The same happens when crossorigin is set through :img-attrs="{ crossorigin: 'anonymous' }".
Describe the bug
The rendered <img> has crossorigin="anonymous", but the preload link in <head> has no crossorigin attribute:
<link rel="preload" as="image" imagesrcset="... 1x, ... 2x">
Because the credentials mode of the preload does not match the image request, the browser does not reuse the preloaded response. Chrome downloads the image twice and logs:
A preload for '...' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.
<NuxtImg> already adds crossorigin to its preload link (#1835, fixed in #1836). The preload link in NuxtPicture.vue was not updated at the same time.
Expected behavior
The preload link uses the same crossorigin value as the <img> element that <NuxtPicture> renders.
- Dominant language
- TypeScript
- Stars
- 1.6k
- Forks
- 329
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 13
Getting set up
- No Dockerfile or Docker Compose file
- No pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from nuxt/image
-
Difficulty 4/5 3-5 days Newbie friendliness 50/100
Maintainers usually reply within 1 day
-
Difficulty 3/5 1-2 days Newbie friendliness 52/100
Maintainers usually reply within 1 day
-
Bun.Image as an additional, self-hosted provider alongside ipxPossibly taken @nathanchase claimed this 55 days ago. Open
Difficulty 5/5 Over a week Newbie friendliness 48/100
Maintainers usually reply within 1 day
-
sizes: an unprefixed fluid value below 50vw emits an invalid 0w srcset descriptorPossibly taken A pull request linked to this issue is open or already merged. Open
Difficulty 3/5 1-2 days Newbie friendliness 74/100
Maintainers usually reply within 1 day
-
Difficulty 3/5 1-2 days Newbie friendliness 55/100
Maintainers usually reply within 1 day
Similar issues
-
comp/desktop desktop/shell os/windows P3 tool/file type/bug
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
NousResearch/hermes-agent#145928 ·
Maintainers usually reply within 1 day
-
compiler-dom: stringifyStatic renders :disabled="0" as a present attributePossibly taken @DaZuiZui claimed this today. Open
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
vuejs/core#16051 · 1 comment ·
Maintainers usually reply within 1 day
-
Difficulty 1/5 Under an hour Newbie friendliness 74/100
-
integration:coding-agents
Difficulty 1/5 Under an hour Newbie friendliness 83/100
vectorize-io/hindsight#6151 ·
Maintainers usually reply within 1 day
-
DogFooding
Difficulty 1/5 Under an hour Newbie friendliness 88/100
OpenAEV-Platform/openaev#8768 ·
Maintainers usually reply within 1 day