diff --git a/.changeset/slow-students-run.md b/.changeset/slow-students-run.md new file mode 100644 index 000000000000..13f28a5479ad --- /dev/null +++ b/.changeset/slow-students-run.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/enhanced-img': patch +--- + +fix: correctly generate client-side code diff --git a/packages/enhanced-img/src/preprocessor.js b/packages/enhanced-img/src/preprocessor.js index 222ad6189954..bf1289a25878 100644 --- a/packages/enhanced-img/src/preprocessor.js +++ b/packages/enhanced-img/src/preprocessor.js @@ -268,10 +268,16 @@ function img_to_picture(content, node, image) { let res = ''; for (const [format, srcset] of Object.entries(image.sources)) { - res += ``; + res += ``; } + // Need to handle src differently when using either Vite's renderBuiltUrl or relative base path in Vite. + // See https://github.com/vitejs/vite/blob/b93dfe3e08f56cafe2e549efd80285a12a3dc2f0/packages/vite/src/node/plugins/asset.ts#L132 + const src = + image.img.src.startsWith('"+') && image.img.src.endsWith('+"') + ? `{"${image.img.src.substring(2, image.img.src.length - 2)}"}` + : `"${image.img.src}"`; res += ``; diff --git a/packages/enhanced-img/test/Output.svelte b/packages/enhanced-img/test/Output.svelte index 61b9820c27a3..fe7caca8a830 100644 --- a/packages/enhanced-img/test/Output.svelte +++ b/packages/enhanced-img/test/Output.svelte @@ -14,21 +14,21 @@ non-enhanced test -basic test +basic test -dimensions test +dimensions test -directive test +directive test -spread attributes test +spread attributes test -sizes test +sizes test -event handler test +event handler test -alias test +alias test -absolute path test +absolute path test svg test