fix(compiler-sfc): transformAssetUrl should ignore inline data url (#1431)

packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap

@@ -32,7 +32,8 @@ export function render(_ctx, _cache) {
     _createVNode(\\"img\\", { src: _imports_1 }),
     _createVNode(\\"img\\", { src: _imports_1 }),
     _createVNode(\\"img\\", { src: \\"http://example.com/fixtures/logo.png\\" }),
-    _createVNode(\\"img\\", { src: \\"/fixtures/logo.png\\" })
+    _createVNode(\\"img\\", { src: \\"/fixtures/logo.png\\" }),
+    _createVNode(\\"img\\", { src: \\"data:image/png;base64,i\\" })
   ], 64 /* STABLE_FRAGMENT */))
 }"
 `;

packages/compiler-sfc/__tests__/__snapshots__/templateTransformSrcset.spec.ts.snap

@@ -55,6 +55,10 @@ export function render(_ctx, _cache) {
     _createVNode(\\"img\\", {
       src: \\"/logo.png\\",
       srcset: _hoisted_8
+    }),
+    _createVNode(\\"img\\", {
+      src: \\"data:image/png;base64,i\\",
+      srcset: \\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\"
     })
   ], 64 /* STABLE_FRAGMENT */))
 }"
@@ -104,6 +108,10 @@ export function render(_ctx, _cache) {
     _createVNode(\\"img\\", {
       src: \\"/logo.png\\",
       srcset: \\"/logo.png, /foo/logo.png 2x\\"
+    }),
+    _createVNode(\\"img\\", {
+      src: \\"data:image/png;base64,i\\",
+      srcset: \\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\"
     })
   ], 64 /* STABLE_FRAGMENT */))
 }"
@@ -125,6 +133,7 @@ const _hoisted_7 = _imports_0 + ', ' + _imports_0 + '2x, ' + _imports_0 + '3x'
 const _hoisted_8 = _imports_1 + ', ' + _imports_1 + '2x'
 const _hoisted_9 = \\"https://example.com/logo.png\\" + ', ' + \\"https://example.com/logo.png\\" + '2x'
 const _hoisted_10 = _imports_1 + ', ' + _imports_0 + '2x'
+const _hoisted_11 = \\"data:image/png;base64,i\\" + '1x, ' + \\"data:image/png;base64,i\\" + '2x'
 
 export function render(_ctx, _cache) {
   return (_openBlock(), _createBlock(_Fragment, null, [
@@ -167,6 +176,10 @@ export function render(_ctx, _cache) {
     _createVNode(\\"img\\", {
       src: \\"/logo.png\\",
       srcset: _hoisted_10
+    }),
+    _createVNode(\\"img\\", {
+      src: \\"data:image/png;base64,i\\",
+      srcset: _hoisted_11
     })
   ], 64 /* STABLE_FRAGMENT */))
 }"

packages/compiler-sfc/__tests__/templateTransformAssetUrl.spec.ts

@@ -30,6 +30,7 @@ describe('compiler sfc: transform asset url', () => {
 			<img src="~/fixtures/logo.png"/>
 			<img src="http://example.com/fixtures/logo.png"/>
 			<img src="/fixtures/logo.png"/>
+			<img src="data:image/png;base64,i"/>
 		`)
 
     expect(result.code).toMatchSnapshot()

packages/compiler-sfc/__tests__/templateTransformSrcset.spec.ts

@@ -35,6 +35,7 @@ const src = `
 <img src="/logo.png" srcset="/logo.png, /logo.png 2x"/>
 <img src="https://example.com/logo.png" srcset="https://example.com/logo.png, https://example.com/logo.png 2x"/>
 <img src="/logo.png" srcset="/logo.png, ./logo.png 2x"/>
+<img src="data:image/png;base64,i" srcset="data:image/png;base64,i 1x, data:image/png;base64,i 2x"/>
 `
 
 describe('compiler sfc: transform srcset', () => {

packages/compiler-sfc/__tests__/templateUtils.spec.ts

@@ -1,6 +1,7 @@
 import {
   isRelativeUrl,
-  isExternalUrl
+  isExternalUrl,
+  isDataUrl
 } from '../../compiler-sfc/src/templateUtils'
 
 describe('compiler sfc:templateUtils isRelativeUrl', () => {
@@ -36,3 +37,17 @@ describe('compiler sfc:templateUtils isExternalUrl', () => {
     expect(result).toBe(true)
   })
 })
+
+describe('compiler sfc:templateUtils isDataUrl', () => {
+  test('should return true w/ hasn`t media type and encode', () => {
+    expect(isDataUrl('data:,i')).toBe(true)
+  })
+
+  test('should return true w/ media type + encode', () => {
+    expect(isDataUrl('data:image/png;base64,i')).toBe(true)
+  })
+
+  test('should return true w/ media type + hasn`t encode', () => {
+    expect(isDataUrl('data:image/png,i')).toBe(true)
+  })
+})