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', pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy