diff --git a/docs/en/options.md b/docs/en/options.md index ccffacf70..7f0d883a4 100644 --- a/docs/en/options.md +++ b/docs/en/options.md @@ -108,9 +108,9 @@ module.exports = { ### transformToRequire - type: `{ [tag: string]: string | Array }` -- default: `{ img: 'src' }` +- default: `{ img: 'src', image: 'xlink:href' }` - During template compilation, the compiler can transform certain attributes, such as `src` URLs, into `require` calls, so that the target asset can be handled by Webpack. The default config transforms the `src` attribute on `` tags. + During template compilation, the compiler can transform certain attributes, such as `src` URLs, into `require` calls, so that the target asset can be handled by Webpack. The default config transforms the `src` attribute on `` tags and `xlink:href` attribute on `` tags of SVG. ### buble diff --git a/lib/template-compiler.js b/lib/template-compiler.js index 8870631f8..58ee3bda7 100644 --- a/lib/template-compiler.js +++ b/lib/template-compiler.js @@ -7,7 +7,8 @@ var hotReloadAPIPath = normalize.dep('vue-hot-reload-api') // vue compiler module for using transforming `:` to `require` var defaultTransformToRequire = { - img: 'src' + img: 'src', + image: 'xlink:href' } var transformToRequire = defaultTransformToRequire var defaultCompileOptions = { diff --git a/package.json b/package.json index 7db777df2..bb436988f 100644 --- a/package.json +++ b/package.json @@ -72,6 +72,7 @@ "stylus": "^0.54.5", "stylus-loader": "^2.0.0", "sugarss": "^0.2.0", + "url-loader": "^0.5.7", "vue": "^2.1.0", "vue-template-compiler": "^2.1.0", "webpack": "^2.1.0-beta.27" diff --git a/test/fixtures/transform.vue b/test/fixtures/transform.vue new file mode 100644 index 000000000..33442c644 --- /dev/null +++ b/test/fixtures/transform.vue @@ -0,0 +1,12 @@ + + + diff --git a/test/test.js b/test/test.js index 4e109724e..e7809c5a4 100644 --- a/test/test.js +++ b/test/test.js @@ -330,6 +330,34 @@ describe('vue-loader', function () { }) }) + it('transformToRequire option', function (done) { + test({ + entry: './test/fixtures/transform.vue', + module: { + rules: [ + { test: /\.vue$/, loader: loaderPath }, + { + test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, + loader: 'url-loader' + } + ] + } + }, function (window, module) { + function includeDataURL (s) { + return !!s.match(/\s*data:([a-z]+\/[a-z]+(;[a-z\-]+\=[a-z\-]+)?)?(;base64)?,[a-z0-9\!\$\&\'\,\(\)\*\+\,\;\=\-\.\_\~\:\@\/\?\%\s]*\s*/i) + } + var vnode = mockRender(module) + // img tag + expect(includeDataURL(vnode.children[0].data.attrs.src)).to.equal(true) + // image tag (SVG) + expect(includeDataURL(vnode.children[2].children[0].data.attrs['xlink:href'])).to.equal(true) + var style = window.document.querySelector('style').textContent + // style + expect(includeDataURL(style)).to.equal(true) + done() + }) + }) + it('postcss options', function (done) { test({ entry: './test/fixtures/postcss.vue',