Cannot resolve external img at build

[posva]

Using an external image like https://images.unsplash.com/photo-1551434678-e076c223a692 or https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80 on an img tag on a vue file fails on build with different errors messages depending on the filename. It does work on dev.

I also noticed other bugs on img that might be related:

• an src to an svg file also fails at build with

ReferenceError: _imports_0 is not defined
    at eval (eval at evaluateConstant (/Users/posva/vite-mafacture/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js:2841:16), <anonymous>:1:1)
    at evaluateConstant (/Users/posva/vite-mafacture/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js:2841:53)
    at stringifyElement (/Users/posva/vite-mafacture/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js:2784:29)
    at stringifyNode (/Users/posva/vite-mafacture/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js:2816:20)
    at stringifyElement (/Users/posva/vite-mafacture/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js:2800:16)
    at stringifyNode (/Users/posva/vite-mafacture/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js:2816:20)
    at stringifyElement (/Users/posva/vite-mafacture/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js:2800:16)
    at stringifyNode (/Users/posva/vite-mafacture/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js:2816:20)
    at stringifyElement (/Users/posva/vite-mafacture/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js:2800:16)
    at stringifyNode (/Users/posva/vite-mafacture/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js:2816:20) {
  code: 'PLUGIN_ERROR',
  plugin: 'vue',
  hook: 'transform',
  id: '/Users/posva/vite-mafacture/App.vue?vue&type=template&id=fd594680',

• Relatives urls without a leading ./ cannot be found

[mikekidder]

https://github.com/vuejs/vite/blob/01135fa1edede1f46acd7c83d18e5131ebc7cbd7/src/node/buildPluginCss.ts#L13

I was going to post an issue on inline images that start with url('data:image/...) but I think its related to your issue.

For what it's worth, adding a negative lookahead: (?!data:) fixed my issue with build.

const urlRE = /(url\(\s*['"]?(?!data:))([^"')]+)(["']?\s*\))/

Probably needs expanded with http, anchor refs - for example:

const urlRE = /(url\(\s*['"]?(?!data:|http|#))([^"')]+)(["']?\s*\))/

[posva]

That's great! I think the error itself is very confusing and it would be helpful to have an error about the non-working import instead of a ReferenceError

[yyx990803]

This is not a regex issue. That regex is used for CSS only.

Fixed in vuejs/core@d662118

SVG src problem should've been fixed by vuejs/core@f9a3766 (which requires 3.0.0-beta.9)