fix(assets): ensure ?no-inline is not included in the asset url in the production environment (#19496)

Co-authored-by: 翠 / green <[email protected]>

Author: OnlyWick

packages/vite/src/node/plugins/asset.ts

@@ -403,7 +403,7 @@ async function fileToBuiltUrl(
     return cached
   }
 
-  const { file, postfix } = splitFileAndPostfix(id)
+  let { file, postfix } = splitFileAndPostfix(id)
   const content = await fsp.readFile(file)
 
   let url: string
@@ -423,6 +423,11 @@ async function fileToBuiltUrl(
       originalFileName,
       source: content,
     })
+
+    if (environment.config.command === 'build' && noInlineRE.test(postfix)) {
+      postfix = postfix.replace(noInlineRE, '').replace(/^&/, '?')
+    }
+
     url = `__VITE_ASSET__${referenceId}__${postfix ? `$_${postfix}__` : ``}`
   }
 

playground/assets/__tests__/assets.spec.ts

@@ -472,11 +472,19 @@ test('?raw import', async () => {
 test('?no-inline svg import', async () => {
   expect(await page.textContent('.no-inline-svg')).toMatch(
     isBuild
-      ? /\/foo\/bar\/assets\/fragment-[-\w]{8}\.svg\?no-inline/
+      ? /\/foo\/bar\/assets\/fragment-[-\w]{8}\.svg/
       : '/foo/bar/nested/fragment.svg?no-inline',
   )
 })
 
+test('?no-inline svg import -- multiple postfix', async () => {
+  expect(await page.textContent('.no-inline-svg-mp')).toMatch(
+    isBuild
+      ? /\/foo\/bar\/assets\/fragment-[-\w]{8}\.svg\?foo=bar/
+      : '/foo/bar/nested/fragment.svg?no-inline&foo=bar',
+  )
+})
+
 test('?inline png import', async () => {
   expect(await page.textContent('.inline-png')).toMatch(
     /^data:image\/png;base64,/,

playground/assets/index.html

@@ -269,6 +269,9 @@ <h2>?raw import</h2>
 <h2>?no-inline svg import</h2>
 <code class="no-inline-svg"></code>
 
+<h2>?no-inline svg import -- multiple postfix</h2>
+<code class="no-inline-svg-mp"></code>
+
 <h2>?inline png import</h2>
 <code class="inline-png"></code>
 
@@ -546,6 +549,9 @@ <h3>assets in template</h3>
   import noInlineSvg from './nested/fragment.svg?no-inline'
   text('.no-inline-svg', noInlineSvg)
 
+  import noInlineSvgMP from './nested/fragment.svg?no-inline&foo=bar'
+  text('.no-inline-svg-mp', noInlineSvgMP)
+
   import inlinePng from './nested/asset.png?inline'
   text('.inline-png', inlinePng)