diff --git a/packages/playground/assets/__tests__/assets.spec.ts b/packages/playground/assets/__tests__/assets.spec.ts
index 621d738133ee8d..cc0047dd736ca4 100644
--- a/packages/playground/assets/__tests__/assets.spec.ts
+++ b/packages/playground/assets/__tests__/assets.spec.ts
@@ -12,6 +12,10 @@ const assetMatch = isBuild
   ? /\/foo\/assets\/asset\.\w{8}\.png/
   : '/foo/nested/asset.png'
 
+const outerAssetMatch = isBuild
+  ? /\/foo\/assets\/asset\.\w{8}\.png/
+  : /\/foo\/@fs\/.+?\/css\/nested\/asset\.png/
+
 const iconMatch = `/foo/icon.png`
 
 test('should have no 404s', () => {
@@ -63,6 +67,12 @@ describe('asset imports from js', () => {
     expect(await page.textContent('.asset-import-absolute')).toMatch(assetMatch)
   })
 
+  test('outer', async () => {
+    expect(await page.textContent('.asset-import-outer')).toMatch(
+      outerAssetMatch
+    )
+  })
+
   test('from /public', async () => {
     expect(await page.textContent('.public-import')).toMatch(iconMatch)
   })
diff --git a/packages/playground/assets/index.html b/packages/playground/assets/index.html
index 01307801abc054..e6d82f6f42ead4 100644
--- a/packages/playground/assets/index.html
+++ b/packages/playground/assets/index.html
@@ -14,14 +14,20 @@ <h2>Raw References from publicDir</h2>
     Raw CSS from publicDir should load (this should be red)
   </li>
   <li>
+    Filename with whitespace
     <img src="/white space.png" />
   </li>
+  <li>
+    Outer file using @fs
+    <img class="asset-outer-img" alt="img" />
+  </li>
 </ul>
 
 <h2>Asset Imports from JS</h2>
 <ul>
   <li>Relative: <code class="asset-import-relative"></code></li>
   <li>Absolute: <code class="asset-import-absolute"></code></li>
+  <li>Outer (@fs): <code class="asset-import-outer"></code></li>
   <li>From publicDir: <code class="public-import"></code></li>
 </ul>
 
@@ -130,6 +136,10 @@ <h2>?url import</h2>
   import absoluteUrl from '/nested/asset.png'
   text('.asset-import-absolute', absoluteUrl)
 
+  import outerUrl from '@playground/css/nested/asset.png'
+  text('.asset-import-outer', outerUrl)
+  src('.asset-outer-img', outerUrl)
+
   import publicUrl from '/icon.png'
   text('.public-import', publicUrl)
 
@@ -146,4 +156,8 @@ <h2>?url import</h2>
   function text(el, text) {
     document.querySelector(el).textContent = text
   }
+
+  function src(el, src) {
+    document.querySelector(el).src = src
+  }
 </script>
diff --git a/packages/playground/assets/vite.config.js b/packages/playground/assets/vite.config.js
index 113191c246a4a8..6730959a13d68d 100644
--- a/packages/playground/assets/vite.config.js
+++ b/packages/playground/assets/vite.config.js
@@ -8,6 +8,7 @@ module.exports = {
   publicDir: 'static',
   resolve: {
     alias: {
+      '@playground': path.resolve(__dirname, '..'),
       '@': path.resolve(__dirname, 'nested')
     }
   },
diff --git a/packages/playground/css/nested/asset.png b/packages/playground/css/nested/asset.png
new file mode 100644
index 00000000000000..1b3356a746b8bb
Binary files /dev/null and b/packages/playground/css/nested/asset.png differ