playground/assets/index.html

<!doctype html>

<head>
  <meta charset="UTF-8" />
  <link class="ico" rel="icon" type="image/svg+xml" href="favicon.ico" />
  <link rel="manifest" href="manifest.json" />
</head>

<link class="data-href" rel="icon" href="data:," />
<link rel="stylesheet" href="/raw.css" />

<h1>Assets</h1>

<p class="base"></p>

<h2>Raw References from publicDir</h2>
<ul>
  <li class="raw-js"></li>
  <script src="/raw.js"></script>
  <li class="raw-css">
    Raw CSS from publicDir should load (this should be red)
  </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>From publicDir: <code class="public-import"></code></li>
  <li>
    From publicDir (json): <code class="public-json-import"></code> Content:
    <code class="public-json-import-content"></code>
  </li>
  <li>
    From publicDir (js): <code class="public-js-import"></code> Content:
    <code class="public-js-import-content"></code>
  </li>
</ul>

<h2>CSS url references</h2>
<div>Font should be loaded (all text should be italic)</div>
<div class="css-url-absolute">
  <span style="background: #fff">CSS background (absolute)</span>
</div>
<div class="css-url-relative">
  <span style="background: #fff">CSS background (relative)</span>
</div>
<div class="css-url-encoded">
  <span style="background: #fff">CSS background (encoded)</span>
</div>
<div class="css-image-set-relative">
  <span style="background: #fff"
    >CSS background with image-set() (relative)</span
  >
</div>
<div class="css-image-set-without-url-call">
  <span style="background: #fff"
    >CSS background with image-set() (relative)</span
  >
</div>
<div class="css-image-set-with-var">
  <span style="background: #fff">
    CSS background image-set() (relative in var)
  </span>
</div>
<div class="css-image-set-mix-url-var">
  <span style="background: #fff">
    CSS background image-set() (mix var and url)
  </span>
</div>
<div class="css-image-set-base64">
  <span style="background: #fff">
    CSS background image-set() (with base64)
  </span>
</div>
<div class="css-image-set-gradient">
  <span style="background: #fff">
    CSS background image-set() (with gradient)
  </span>
</div>
<div class="css-image-set-multiple-descriptor">
  <span style="background: #fff">
    CSS background image-set() (with multiple descriptor)
  </span>
</div>
<div
  class="css-image-set-multiple-descriptor-inline-style"
  style="
    background-image: -webkit-image-set(
      './nested/asset.png' type('image/png') 1x,
      './nested/asset.png' type('image/png') 2x
    );
    background-size: 10px;
  "
>
  <span style="background: #fff">
    CSS background image-set() inline style (with multiple descriptor)
  </span>
</div>
<div class="css-url-relative-at-imported">
  <span style="background: #fff"
    >CSS background (relative from @imported file in different dir)</span
  >
</div>
<div class="css-url-public">
  <span style="background: #fff">CSS background (public)</span>
</div>
<div class="css-url-data-uri">
  <span style="background: #fff">CSS background (data URI)</span>
</div>
<div class="css-url-base64-inline">
  <span style="background: #fff">CSS background (base64 inline in prod)</span>
</div>
<div class="css-url-quotes-base64-inline">
  <span style="background: #fff">CSS background (base64 inline in prod)</span>
</div>
<div class="css-url-same-line">
  <span style="background: #fff"
    >CSS background (multiple urls on same line)</span
  >
</div>
<div class="css-url-aliased">
  <span style="background: #fff">CSS background (aliased)</span>
</div>
<div class="css-manual-chunks-relative">
  <span style="background: #fff"
    >CSS nested manual chunks relative base background</span
  >
</div>

<div class="css-url-svg">
  <span style="background: #fff">CSS SVG background</span>
</div>

<div class="css-image-set-svg">
  <span style="background: #fff">CSS SVG background with image-set</span>
</div>

<h2>Unicode URL</h2>
<div>
  <code class="unicode-url"></code>
  <img src="./nested/テスト-測試-white space.png" />
</div>

<h2>Filename including single quote</h2>
<div>
  <code class="filename-including-single-quote"></code>
</div>

<h2>Filename including percent</h2>
<div>
  <code class="percent-url"></code>
  <img src="./asset/percent%25.png" />
</div>

<h2>encodeURI for the address</h2>
<div>
  <img
    class="encodeURI"
    src="./nested/%E3%83%86%E3%82%B9%E3%83%88-%E6%B8%AC%E8%A9%A6-white%20space.png"
  />
</div>

<h2>Image Src Set</h2>
<div>
  <img
    class="img-src-set"
    src="./nested/asset.png"
    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=""
  />
  <img
    class="img-src-set-mixed"
    src="/icon.png"
    srcset="https://vite.dev/logo-with-shadow.png 1x, ./nested/asset.png 2x"
    alt=""
  />
</div>

<h2>HTML only asset</h2>
<div>
  <img class="img-src" src="./nested/html-only-asset.jpg" alt="" />
</div>

<h2>HTML inline asset</h2>
<div>
  <img class="img-src-inline" src="./nested/inlined.svg" alt="" />
</div>

<h2>SVG Fragments</h2>
<div>
  <img
    class="svg-frag-img"
    src="./nested/fragment.svg#icon-clock-view"
    alt=""
  />
  <img
    class="svg-frag-img"
    src="./nested/fragment.svg#icon-heart-view"
    alt=""
  />
  <img
    class="svg-frag-img"
    src="./nested/fragment.svg#icon-arrow-right-view"
    alt=""
  />
</div>

<h2>SVG Fragments via CSS background url</h2>
<div>
  <span class="icon icon-clock"></span>
  <span class="icon icon-heart"></span>
  <span class="icon icon-arrow-right"></span>
  <span class="icon icon-clock-alias"></span>
</div>

<h2>SVG Fragments via JS Import</h2>
<div>
  <p>Imported path: <code class="svg-frag-import-path"></code></p>
  <img class="svg-frag-import" alt="" />
</div>

<h2>Unknown extension assets import</h2>
<code class="unknown-ext"></code>

<h2>?raw import</h2>
<code class="raw"></code>

<h2>?url import</h2>
<code class="url"></code>

<h2>?url import with css</h2>
<code class="url-css"></code>

<h2>new URL('...', import.meta.url)</h2>
<img class="import-meta-url-img" />
<code class="import-meta-url"></code>

<h2>new URL('@/...', import.meta.url)</h2>
<img class="import-meta-url-dep-img" />
<code class="import-meta-url-dep"></code>

<h2>new URL('/...', import.meta.url)</h2>
<img class="import-meta-url-base-path-img" />
<code class="import-meta-url-base-path"></code>

<h2>new URL('data:...', import.meta.url)</h2>
<img class="import-meta-url-data-uri-img" />
<code class="import-meta-url-data-uri"></code>

<h2>new URL('...', import.meta.url (without extension))</h2>
<p>
  <code class="import-meta-url-content-without-extension"></code>
</p>
<p>
  <code class="import-meta-url-without-extension"></code>
</p>

<h2>new URL('...', import.meta.url,) (with comma)</h2>
<img class="import-meta-url-img-comma" />
<code class="import-meta-url-comma"></code>

<h2>new URL('...', import.meta.url,) (with comma + new line)</h2>
<img class="import-meta-url-img-comma-nl" />
<code class="import-meta-url-comma-nl"></code>

<h2>new URL(`./${dynamic}`, import.meta.url)</h2>
<p>
  <img class="dynamic-import-meta-url-img-1" />
  <code class="dynamic-import-meta-url-1"></code>
</p>
<p>
  <img class="dynamic-import-meta-url-img-2" />
  <code class="dynamic-import-meta-url-2"></code>
</p>
<p>
  <code class="dynamic-import-meta-url-js"></code>
</p>

<h2>new URL(`./${dynamic}`, import.meta.url,) (with comma)</h2>
<p>
  <img class="dynamic-import-meta-url-img-1-comma" />
  <code class="dynamic-import-meta-url-1-comma"></code>
</p>
<p>
  <img class="dynamic-import-meta-url-img-2-comma" />
  <code class="dynamic-import-meta-url-2-comma"></code>
</p>

<h2>new URL(`./${dynamic}?abc`, import.meta.url)</h2>
<p>
  <img class="dynamic-import-meta-url-img-1-query" />
  <code class="dynamic-import-meta-url-1-query"></code>
</p>
<p>
  <img class="dynamic-import-meta-url-img-2-query" />
  <code class="dynamic-import-meta-url-2-query"></code>
</p>

<h2>new URL(`./${1 === 0 ? static : dynamic}?abc`, import.meta.url)</h2>
<p>
  <img class="dynamic-import-meta-url-img-1-ternary" />
  <code class="dynamic-import-meta-url-1-ternary"></code>
</p>
<p>
  <img class="dynamic-import-meta-url-img-2-ternary" />
  <code class="dynamic-import-meta-url-2-ternary"></code>
</p>

<h2>new URL(/* @vite-ignore */ 'non-existent', import.meta.url)</h2>
<p>
  <code class="non-existent-import-meta-url"></code>
</p>

<h2>new URL(`${dynamic}`, import.meta.url)</h2>
<p>
  <code class="dynamic-import-meta-url-all"></code>
</p>

<h2>simple script tag import-expression</h2>
<code class="import-expression"></code>
<code class="obj-import-express"></code>
<code class="string-import-express"></code>
<script>
  const obj = {
    import(t) {
      text('.obj-import-express', t)
    },
  }
  const stringImport = "const t = import('package')"
  function text(el, text) {
    document.querySelector(el).textContent = text
  }
  import('./static/import-expression.js')
  import('/import-expression.js')
  // import('./static/raw.js')
  /* import('./static/raw.js') */
  obj.import('ignore object import prop')
  try {
    text('.string-import-express', t)
  } catch {
    text('.string-import-express', 'no load')
  }
</script>
<h2>url in style tag</h2>
<h3>url</h3>
<style class="style-url">
  .style-url-assets {
    background: url('./nested/asset.png');
    background-size: 10px 10px;
  }
</style>
<div
  class="inline-style"
  style="background: url('./nested/asset.png'); background-size: 10px 10px"
>
  inline style
</div>
<div class="style-url-assets">use style class</div>

<h3>base64</h3>
<style class="style-base64">
  .style-base64-assets {
    background: url('./static/icon.png');
  }
</style>
<p class="inline-style-base64" style="background: url(./static/icon.png)">
  inline style
</p>
<p class="style-base64-assets">use style class</p>
<h3>from publicDir</h3>
<style>
  .style-public-assets {
    background: url('/icon.png');
  }
</style>
<p class="inline-style-public" style="background: url(/icon.png)">
  inline style
</p>
<p class="style-public-assets">use style class</p>

<h3 class="import-css">@import</h3>
<style class="style-import">
  @import url('./css/import.css');
</style>

<h3 class="foo-public">
  @import CSS from publicDir should load (this should be red)
</h3>
<h3 id="foo">import module css</h3>

<h3 class="raw-query"></h3>

<h3>style in svg</h3>
<svg viewBox="0 0 512 512" width="21" height="21" class="style-insvg">
  <style>
    .style-insvg-color {
      fill: #0088ff;
    }
  </style>
  <g class="style-insvg-color">
    <rect x="224" y="352" width="64" height="64" />
    <path
      d="M128 128v96h64v-96h96v96h-32v32h-32v64h64v-64h64V128h-32V96H160v32h-32z"
    />
  </g>
</svg>

<h3>assets in noscript</h3>
<noscript>
  <img class="noscript" src="./nested/asset.png" />
</noscript>

<h3>assets in template</h3>
<template>
  <img class="template" src="./nested/asset.png" />
</template>

<link rel="stylesheet" href="asset/style.css" />
<div class="relative-css">link style</div>
<div class="relative-js"></div>
<script src="asset/main.js" type="module"></script>
<style>
  @import '/foo.css';
</style>

<script type="module">
  import './css/fonts.css'
  import './css/css-url.css'
  import './css/icons.css'
  import './css/manual-chunks.css'

  text('.base', `import.meta.${``}env.BASE_URL: ${import.meta.env.BASE_URL}`)

  import url from './nested/asset.png'
  text('.asset-import-relative', url)

  import absoluteUrl from '/nested/asset.png'
  text('.asset-import-absolute', absoluteUrl)

  import publicUrl from '/icon.png'
  text('.public-import', publicUrl)

  import publicJsonUrl from '/foo.json?url'
  text('.public-json-import', publicJsonUrl)
  ;(async () => {
    const res = await fetch(publicJsonUrl)
    text('.public-json-import-content', await res.text())
  })()

  import publicJsUrl from '/raw.js?url'
  text('.public-js-import', publicJsUrl)
  ;(async () => {
    const res = await fetch(publicJsUrl)
    text('.public-js-import-content', await res.text())
  })()

  import svgFrag from './nested/fragment.svg'
  text('.svg-frag-import-path', svgFrag)
  document.querySelector('.svg-frag-import').src = svgFrag + '#icon-heart-view'

  import unknownExtUrl from './nested/foo.unknown'
  text('.unknown-ext', unknownExtUrl)

  import rawSvg from './nested/fragment.svg?raw'
  text('.raw', rawSvg)

  import fooUrl from './foo.js?url'
  text('.url', fooUrl)

  import unicodeUrl from './テスト-測試-white space.js?url'
  text('.unicode-url', unicodeUrl)

  import filenameIncludingSingleQuoteUrl from "./nested/with-single'quote.png"
  text('.filename-including-single-quote', filenameIncludingSingleQuoteUrl)

  // TODO: is not supported yet (https:/vitejs/vite/pull/16243)
  // import percentUrl from './asset/percent%25.png?url'
  // text('.percent-url', percentUrl)

  import cssUrl from './css/icons.css?url'
  text('.url-css', cssUrl)

  // const url = new URL('non_existent_file.png', import.meta.url)
  const metaUrl = new URL('./nested/asset.png', import.meta.url)
  text('.import-meta-url', metaUrl)
  document.querySelector('.import-meta-url-img').src = metaUrl

  const metaUrlDep = new URL('@/asset.png', import.meta.url)
  text('.import-meta-url-dep', metaUrlDep)
  document.querySelector('.import-meta-url-dep-img').src = metaUrlDep

  // testing URLs for public assets served at the public base path
  // equivalent to `new URL(`${import.meta.env.BASE_URL}/icon.png`, import.meta.url)
  const metaUrlBasePath = new URL('/icon.png', import.meta.url)
  text('.import-meta-url-base-path', metaUrlBasePath)
  document.querySelector('.import-meta-url-base-path-img').src = metaUrlBasePath

  const metaUrlDataUri = new URL(
    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA0CAYAAADWr1sfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTAyNkI1RkE4N0VCMTFFQUFBQzJENzUzNDFGRjc1N0UiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTAyNkI1Rjk4N0VCMTFFQUFBQzJENzUzNDFGRjc1N0UiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTc3NzA2Q0Y4N0FCMTFFM0I3MERFRTAzNzcwNkMxMjMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTc3NzA2RDA4N0FCMTFFM0I3MERFRTAzNzcwNkMxMjMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6nwnGxAAAJtklEQVR42txZ6W9c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',
    import.meta.url,
  )
  text('.import-meta-url-data-uri', metaUrlDataUri)
  document.querySelector('.import-meta-url-data-uri-img').src = metaUrlDataUri

  const metaUrlWithoutExtension = new URL('./nested/test', import.meta.url)
  text('.import-meta-url-without-extension', metaUrlWithoutExtension)
  ;(async () => {
    const res = await fetch(metaUrlWithoutExtension)
    text('.import-meta-url-content-without-extension', await res.text())
  })()

  // prettier-ignore
  const metaUrlWithComma = new URL('./nested/asset.png', import.meta.url,)
  text('.import-meta-url-comma', metaUrlWithComma)
  document.querySelector('.import-meta-url-img-comma').src = metaUrlWithComma

  // testing trailing comma and new line
  // prettier-ignore
  const metaUrlWithCommaNL = new URL(
    './nested/asset.png',
    import.meta.url,
  )
  text('.import-meta-url-comma-nl', metaUrlWithCommaNL)
  document.querySelector('.import-meta-url-img-comma-nl').src =
    metaUrlWithCommaNL

  import classNames from './css/foo.module.css'
  document.querySelector('#foo').className = classNames['foo-module']

  import someString from './static/foo.txt?raw'
  document.querySelector('.raw-query').textContent = someString

  const metaUrlNonExistent = new URL(
    /* @vite-ignore */ 'non-existent',
    import.meta.url,
  ).pathname
  text('.non-existent-import-meta-url', metaUrlNonExistent)

  /**
   * don't process the code in the comment
   * const url = new URL('non_existent_file.png', import.meta.url)
   */

  function testDynamicImportMetaUrl(name, i) {
    const metaUrl = new URL(`./nested/${name}.png`, import.meta.url)
    text(`.dynamic-import-meta-url-${i}`, metaUrl)
    document.querySelector(`.dynamic-import-meta-url-img-${i}`).src = metaUrl
  }

  testDynamicImportMetaUrl('icon', 1)
  testDynamicImportMetaUrl('asset', 2)

  function testDynamicImportMetaUrlWithComma(name, i) {
    // prettier-ignore
    const metaUrl = new URL(`./nested/${name}.png`, import.meta.url,)
    text(`.dynamic-import-meta-url-${i}-comma`, metaUrl)
    document.querySelector(`.dynamic-import-meta-url-img-${i}-comma`).src =
      metaUrl
  }

  testDynamicImportMetaUrlWithComma('icon', 1)
  testDynamicImportMetaUrlWithComma('asset', 2)

  function testDynamicImportMetaUrlWithQuery(name, i) {
    // prettier-ignore
    const metaUrl = new URL(`./nested/${name}.png?abc`, import.meta.url,)
    text(`.dynamic-import-meta-url-${i}-query`, metaUrl)
    document.querySelector(`.dynamic-import-meta-url-img-${i}-query`).src =
      metaUrl
  }

  testDynamicImportMetaUrlWithQuery('icon', 1)
  testDynamicImportMetaUrlWithQuery('asset', 2)

  function testDynamicImportMetaUrlWithTernaryOperator(name, i) {
    // prettier-ignore
    const metaUrl = new URL(`./nested/${1 === 0 ? 'failed' : name}.png?abc`, import.meta.url,)
    text(`.dynamic-import-meta-url-${i}-ternary`, metaUrl)
    document.querySelector(`.dynamic-import-meta-url-img-${i}-ternary`).src =
      metaUrl
  }

  testDynamicImportMetaUrlWithTernaryOperator('icon', 1)
  testDynamicImportMetaUrlWithTernaryOperator('asset', 2)

  {
    const name = 'test'
    const js = new URL(`./nested/${name}.js`, import.meta.url).href
    text('.dynamic-import-meta-url-js', js)
  }

  {
    const name = './nested/icon'
    const metaUrl = new URL(`${name}.png`, import.meta.url)
    text(`.dynamic-import-meta-url-all`, metaUrl)
  }

  function text(el, text) {
    document.querySelector(el).textContent = text
  }
</script>