Skip to content

fix(ipx): encode ampersands in image uris #2005

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
+37 −18
Open

fix(ipx): encode ampersands in image uris #2005

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
696fa4c
feat: encode reserved characters in URI path
riddla Mar 1, 2024
a09d597
Merge remote-tracking branch 'origin/main' into feat/encode-reserved-…
danielroe Nov 3, 2025
178c5a0
refactor: implement with custom `joinWith` + update snapshots
danielroe Nov 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/runtime/providers/ipx.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ export const operationsGenerator = createOperationsGenerator({
background: 'b',
position: 'pos',
},
joinWith: encodeURIComponent('&'),
formatter: (key, val: string | number | boolean) => encodeParam(key) + '_' + encodeParam(val.toString()),
})

Expand Down
2 changes: 1 addition & 1 deletion test/e2e/ssr.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ describe('browser (ssr: true)', () => {
expect(await $fetch('/api/image' as any)).toMatchInlineSnapshot(`
{
"format": "webp",
"url": "/_ipx/f_webp&q_75/image.jpg",
"url": "/_ipx/f_webp%26q_75/image.jpg",
}
`)
})
Expand Down
8 changes: 4 additions & 4 deletions test/nuxt/image.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,7 @@ describe('Renders placeholder image', () => {

let domSrc = wrapper.find('img').element.getAttribute('src')

expect(domSrc).toMatchInlineSnapshot('"/_ipx/q_50&blur_3&s_10x10/image.png"')
expect(domSrc).toMatchInlineSnapshot(`"/_ipx/q_50%26blur_3%26s_10x10/image.png"`)
expect(placeholderImage.src).toMatchInlineSnapshot('"/_ipx/s_200x200/image.png"')

resolveImage()
Expand Down Expand Up @@ -296,7 +296,7 @@ describe('Renders placeholder image', () => {
"other",
]
`)
expect(wrapper.element.getAttribute('src')).toMatchInlineSnapshot('"/_ipx/q_50&blur_3&s_10x10/image.png"')
expect(wrapper.element.getAttribute('src')).toMatchInlineSnapshot(`"/_ipx/q_50%26blur_3%26s_10x10/image.png"`)
resolveImage()
await nextTick()
expect([...wrapper.element.classList]).toMatchInlineSnapshot(`
Expand Down Expand Up @@ -525,7 +525,7 @@ describe('Renders image, applies module config', () => {
sizes: '200,500:500,900:900',
},
})
expect(img.html()).toMatchInlineSnapshot(`"<img width="200" height="200" data-nuxt-img="" sizes="(max-width: 500px) 200px, (max-width: 900px) 500px, 900px" srcset="/_ipx/q_75&amp;s_200x200/image.png 200w, /_ipx/q_75&amp;s_400x400/image.png 400w, /_ipx/q_75&amp;s_500x500/image.png 500w, /_ipx/q_75&amp;s_900x900/image.png 900w, /_ipx/q_75&amp;s_1000x1000/image.png 1000w, /_ipx/q_75&amp;s_1800x1800/image.png 1800w" src="/_ipx/q_75&amp;s_1800x1800/image.png">"`)
expect(img.html()).toMatchInlineSnapshot(`"<img width="200" height="200" data-nuxt-img="" sizes="(max-width: 500px) 200px, (max-width: 900px) 500px, 900px" srcset="/_ipx/q_75%26s_200x200/image.png 200w, /_ipx/q_75%26s_400x400/image.png 400w, /_ipx/q_75%26s_500x500/image.png 500w, /_ipx/q_75%26s_900x900/image.png 900w, /_ipx/q_75%26s_1000x1000/image.png 1000w, /_ipx/q_75%26s_1800x1800/image.png 1800w" src="/_ipx/q_75%26s_1800x1800/image.png">"`)
})

it('Module config .quality + props.quality => props.quality applies', () => {
Expand All @@ -539,7 +539,7 @@ describe('Renders image, applies module config', () => {
quality: 90,
},
})
expect(img.html()).toMatchInlineSnapshot(`"<img width="200" height="200" data-nuxt-img="" sizes="(max-width: 500px) 200px, (max-width: 900px) 500px, 900px" srcset="/_ipx/q_90&amp;s_200x200/image.png 200w, /_ipx/q_90&amp;s_400x400/image.png 400w, /_ipx/q_90&amp;s_500x500/image.png 500w, /_ipx/q_90&amp;s_900x900/image.png 900w, /_ipx/q_90&amp;s_1000x1000/image.png 1000w, /_ipx/q_90&amp;s_1800x1800/image.png 1800w" src="/_ipx/q_90&amp;s_1800x1800/image.png">"`)
expect(img.html()).toMatchInlineSnapshot(`"<img width="200" height="200" data-nuxt-img="" sizes="(max-width: 500px) 200px, (max-width: 900px) 500px, 900px" srcset="/_ipx/q_90%26s_200x200/image.png 200w, /_ipx/q_90%26s_400x400/image.png 400w, /_ipx/q_90%26s_500x500/image.png 500w, /_ipx/q_90%26s_900x900/image.png 900w, /_ipx/q_90%26s_1000x1000/image.png 1000w, /_ipx/q_90%26s_1800x1800/image.png 1800w" src="/_ipx/q_90%26s_1800x1800/image.png">"`)
})

it('Without quality config => default image', () => {
Expand Down
Loading
Loading