An external img should not generate an import statement

Describe the bug

Here’s the setup. Page1.vue contains an external image that doesn’t exist in this repo**:

<img alt="smpte bars" class="logo" src="/img/aaaSMPTE-color-bars.png" />

There’s a entry-point-1.ts file which includes the Page1.vue file, and that entry point file is specified as an input in the vite.config.ts config. The vite.config.ts also has a rollup config that specifies that PNG to be external:

export default defineConfig({
  // ...
  build: {
    rollupOptions: {
      input: [
        'src/entry-point-1.ts',
      ],
      external: [
        '/img/aaaSMPTE-color-bars.png',
      ],
      // ...
    }
  },
  // ...
})

Expected Behavior

Run npm run build.

After running npm run build, the generated .js file should not attempt to import anything for that <img> source, and the string literal /img/aaaSMPTE-color-bars.png should be left intact when rendering that <img>. That <img> is expected to be completely external (honoring the rollup config), and should be ignored by any client code.

Actual Behavior

The build does not ignore that <img> tag, and generates an import statement that expects that image file to be in a relative location, i.e. in the build output,

File dist/assets/entry-point-1.e49989cd.js:

[blahblahblah]import n from"../../img/aaaSMPTE-color-bars.png";[blahblahblah]()=>p("img",{alt:"smpte bars",class:"logo",src:n},null,-1)

That import breaks at runtime on the client side. That import should not exist in the build output, and the rendering of the "img" tag should be a static string value rather than the imported variable (n).

Reproduction

https://github.com/bseib/vue-vite-external-static-image

System Info

$ npx envinfo --system --npmPackages '{vite,@vitejs/*}' --binaries --browsers

  System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i7-3770 CPU @ 3.40GHz
    Memory: 4.69 GB / 15.81 GB
  Binaries:
    Node: 14.15.4 - C:\Program Files (x86)\Nodist\bin\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.10 - C:\Program Files (x86)\Nodist\bin\npm.EXE
  Browsers:
    Chrome: 100.0.4896.127
    Edge: Spartan (44.19041.1266.0), Chromium (101.0.1210.39)
    Internet Explorer: 11.0.19041.1566

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[bseib]

Whoops! I did not update the @vitejs/plugin-vue, despite acknowledging that I needed to! 😳 🤦‍♂️

Using that workaround, the output looks correct now compared to the previous output, with the excess import statement removed:

I pushed a branch showing this working.

Thanks @LinusBorg and @bluwy .

[LinusBorg]

did you update @vitejs/plugin-vue (2.3.2), as that’s where the fix happened?