fix(html): srcset pointing image in public dir wasn't working during …

…dev (#14663)
vitejs · Oct 17, 2023 · 4496ae7 · 4496ae7
1 parent 3c16b71
commit 4496ae7
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 28 deletions.
diff --git a/packages/vite/src/node/server/middlewares/indexHtml.ts b/packages/vite/src/node/server/middlewares/indexHtml.ts
@@ -120,34 +120,28 @@ const processNodeUrl = (
       url = injectQuery(url, `t=${mod.lastHMRTimestamp}`)
     }
   }
-  const devBase = config.base
-  if (url[0] === '/' && url[1] !== '/') {
-    // prefix with base (dev only, base is never relative)
-    const fullUrl = path.posix.join(devBase, url)
-    if (server && shouldPreTransform(url, config)) {
-      preTransformRequest(server, fullUrl, devBase)
-    }
-    return fullUrl
-  } else if (
-    (url[0] === '.' || startsWithWordCharRE.test(url)) &&
-    originalUrl &&
-    originalUrl !== '/' &&
-    htmlPath === '/index.html'
+
+  if (
+    (url[0] === '/' && url[1] !== '/') ||
+    // #3230 if some request url (localhost:3000/a/b) return to fallback html, the relative assets
+    // path will add `/a/` prefix, it will caused 404.
+    // rewrite before `./index.js` -> `localhost:5173/a/index.js`.
+    // rewrite after `../index.js` -> `localhost:5173/index.js`.
+    ((url[0] === '.' || startsWithWordCharRE.test(url)) &&
+      originalUrl &&
+      originalUrl !== '/' &&
+      htmlPath === '/index.html')
   ) {
     // prefix with base (dev only, base is never relative)
     const replacer = (url: string) => {
+      const devBase = config.base
       const fullUrl = path.posix.join(devBase, url)
       if (server && shouldPreTransform(url, config)) {
         preTransformRequest(server, fullUrl, devBase)
       }
       return fullUrl
     }
 
-    // #3230 if some request url (localhost:3000/a/b) return to fallback html, the relative assets
-    // path will add `/a/` prefix, it will caused 404.
-    // rewrite before `./index.js` -> `localhost:5173/a/index.js`.
-    // rewrite after `../index.js` -> `localhost:5173/index.js`.
-
     const processedUrl = useSrcSetReplacer
       ? processSrcSetSync(url, ({ url }) => replacer(url))
       : replacer(url)

diff --git a/packages/vite/src/node/utils.ts b/packages/vite/src/node/utils.ts
@@ -682,23 +682,19 @@ interface ImageCandidate {
 }
 const escapedSpaceCharacters = /( |\\t|\\n|\\f|\\r)+/g
 const imageSetUrlRE = /^(?:[\w\-]+\(.*?\)|'.*?'|".*?"|\S*)/
-function reduceSrcset(ret: { url: string; descriptor: string }[]) {
-  return ret.reduce((prev, { url, descriptor }, index) => {
-    descriptor ??= ''
-    return (prev +=
-      url + ` ${descriptor}${index === ret.length - 1 ? '' : ', '}`)
-  }, '')
+function joinSrcset(ret: ImageCandidate[]) {
+  return ret.map(({ url, descriptor }) => `${url} ${descriptor}`).join(', ')
 }
 
 function splitSrcSetDescriptor(srcs: string): ImageCandidate[] {
   return splitSrcSet(srcs)
     .map((s) => {
       const src = s.replace(escapedSpaceCharacters, ' ').trim()
-      const [url] = imageSetUrlRE.exec(src) || ['']
+      const url = imageSetUrlRE.exec(src)?.[0] ?? ''
 
       return {
         url,
-        descriptor: src?.slice(url.length).trim(),
+        descriptor: src.slice(url.length).trim(),
       }
     })
     .filter(({ url }) => !!url)
@@ -713,14 +709,14 @@ export function processSrcSet(
       url: await replacer({ url, descriptor }),
       descriptor,
     })),
-  ).then((ret) => reduceSrcset(ret))
+  ).then(joinSrcset)
 }
 
 export function processSrcSetSync(
   srcs: string,
   replacer: (arg: ImageCandidate) => string,
 ): string {
-  return reduceSrcset(
+  return joinSrcset(
     splitSrcSetDescriptor(srcs).map(({ url, descriptor }) => ({
       url: replacer({ url, descriptor }),
       descriptor,

diff --git a/playground/assets/__tests__/assets.spec.ts b/playground/assets/__tests__/assets.spec.ts
@@ -267,6 +267,14 @@ describe('image', () => {
       )
     })
   })
+
+  test('srcset (public)', async () => {
+    const img = await page.$('.img-src-set-public')
+    const srcset = await img.getAttribute('srcset')
+    srcset.split(', ').forEach((s) => {
+      expect(s).toMatch(/\/foo\/bar\/icon\.png \dx/)
+    })
+  })
 })
 
 describe('svg fragments', () => {

diff --git a/playground/assets/index.html b/playground/assets/index.html
@@ -137,6 +137,12 @@ <h2>Image Src Set</h2>
     srcset="./nested/asset.png 1x, ./nested/asset.png 2x"
     alt=""
   />
+  <img
+    class="img-src-set-public"
+    src="/icon space.png"
+    srcset="/icon.png 1x, /icon.png 2x"
+    alt=""
+  />
 </div>
 
 <h2>SVG Fragments</h2>