Skip to content

Commit

Permalink
fix(compiler-sfc): transformAssetUrl should ignore inline data url (#…
Browse files Browse the repository at this point in the history
  • Loading branch information
underfin authored Jun 24, 2020
1 parent 37a5952 commit 90c285c
Show file tree
Hide file tree
Showing 8 changed files with 61 additions and 4 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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 */))
}"
`;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 */))
}"
Expand Down Expand Up @@ -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 */))
}"
Expand All @@ -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, [
Expand Down Expand Up @@ -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 */))
}"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down
17 changes: 16 additions & 1 deletion packages/compiler-sfc/__tests__/templateUtils.spec.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {
isRelativeUrl,
isExternalUrl
isExternalUrl,
isDataUrl
} from '../../compiler-sfc/src/templateUtils'

describe('compiler sfc:templateUtils isRelativeUrl', () => {
Expand Down Expand Up @@ -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)
})
})
8 changes: 7 additions & 1 deletion packages/compiler-sfc/src/templateTransformAssetUrl.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,12 @@ import {
SourceLocation,
TransformContext
} from '@vue/compiler-core'
import { isRelativeUrl, parseUrl, isExternalUrl } from './templateUtils'
import {
isRelativeUrl,
parseUrl,
isExternalUrl,
isDataUrl
} from './templateUtils'
import { isArray } from '@vue/shared'

export interface AssetURLTagConfig {
Expand Down Expand Up @@ -99,6 +104,7 @@ export const transformAssetUrl: NodeTransform = (
!assetAttrs.includes(attr.name) ||
!attr.value ||
isExternalUrl(attr.value.content) ||
isDataUrl(attr.value.content) ||
attr.value.content[0] === '#' ||
(!options.includeAbsolute && !isRelativeUrl(attr.value.content))
) {
Expand Down
17 changes: 16 additions & 1 deletion packages/compiler-sfc/src/templateTransformSrcset.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,12 @@ import {
NodeTypes,
SimpleExpressionNode
} from '@vue/compiler-core'
import { isRelativeUrl, parseUrl, isExternalUrl } from './templateUtils'
import {
isRelativeUrl,
parseUrl,
isExternalUrl,
isDataUrl
} from './templateUtils'
import {
AssetURLOptions,
defaultAssetUrlOptions
Expand Down Expand Up @@ -51,6 +56,15 @@ export const transformSrcset: NodeTransform = (
return { url, descriptor }
})

// for data url need recheck url
for (let i = 0; i < imageCandidates.length; i++) {
if (imageCandidates[i].url.trim().startsWith('data:')) {
imageCandidates[i + 1].url =
imageCandidates[i].url + ',' + imageCandidates[i + 1].url
imageCandidates.splice(i, 1)
}
}

// When srcset does not contain any relative URLs, skip transforming
if (
!options.includeAbsolute &&
Expand Down Expand Up @@ -78,6 +92,7 @@ export const transformSrcset: NodeTransform = (
imageCandidates.forEach(({ url, descriptor }, index) => {
if (
!isExternalUrl(url) &&
!isDataUrl(url) &&
(options.includeAbsolute || isRelativeUrl(url))
) {
const { path } = parseUrl(url)
Expand Down
5 changes: 5 additions & 0 deletions packages/compiler-sfc/src/templateUtils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,11 @@ export function isExternalUrl(url: string): boolean {
return externalRE.test(url)
}

const dataUrlRE = /^\s*data:/i
export function isDataUrl(url: string): boolean {
return dataUrlRE.test(url)
}

/**
* Parses string url into URL object.
*/
Expand Down

0 comments on commit 90c285c

Please sign in to comment.