fix: use image name function when using inline query

TheAlexLichter · TheAlexLichter · commit c90a8ed33d0e · 2020-01-22T16:15:13.000+01:00
diff --git a/lib/module.js b/lib/module.js
@@ -7,12 +7,14 @@ export default function nuxtSvgLoader() {
     options.svgoConfig = options.svgo
   }
 
-  this.extendBuild(setupVueSvgLoader(options))
+  const fileName = this.nuxt.options.build.filenames.img(this.nuxt.options.dev)
+
+  this.extendBuild(setupVueSvgLoader(options, fileName))
 }
 
 const svgRulePredicate = rule => rule.test && rule.test.test('.svg')
 
-const setupVueSvgLoader = options => (config) => {
+const setupVueSvgLoader = (options, fileName) => (config) => {
   // https://github.com/egoist/svg-to-vue-component#nuxtjs-2
   const imageLoaderRule = config.module.rules.find(svgRulePredicate)
 
@@ -33,7 +35,7 @@ const setupVueSvgLoader = options => (config) => {
         resourceQuery: /inline/,
         loader: 'file-loader',
         query: {
-          name: '[name].[ext]'
+          name: fileName
         }
       },
       {
diff --git a/test/__snapshots__/module.test.js.snap b/test/__snapshots__/module.test.js.snap
@@ -4,7 +4,7 @@ exports[`ssr correctly load SVG as background image 1`] = `
 "<!doctype html>
 <html data-n-head-ssr data-n-head=\\"\\">
   <head data-n-head=\\"\\">
-    <title data-n-head=\\"true\\"></title><style data-vue-ssr-id=\\"17cfdfa9:0\\">.nuxt-progress{position:fixed;top:0;left:0;right:0;height:2px;width:0;opacity:1;transition:width .1s,opacity .4s;background-color:#000;z-index:999999}.nuxt-progress.nuxt-progress-notransition{transition:none}.nuxt-progress-failed{background-color:red}</style><style data-vue-ssr-id=\\"7bcfa2f0:0\\">h1{background:url(/_nuxt/NuxtTwo.svg)}</style>
+    <title data-n-head=\\"true\\"></title><style data-vue-ssr-id=\\"17cfdfa9:0\\">.nuxt-progress{position:fixed;top:0;left:0;right:0;height:2px;width:0;opacity:1;transition:width .1s,opacity .4s;background-color:#000;z-index:999999}.nuxt-progress.nuxt-progress-notransition{transition:none}.nuxt-progress-failed{background-color:red}</style><style data-vue-ssr-id=\\"7bcfa2f0:0\\">h1{background:url(/_nuxt/img/a88f1f4.svg)}</style>
   </head>
   <body data-n-head=\\"\\">
     <div data-server-rendered=\\"true\\" id=\\"__nuxt\\"><!----><div id=\\"__layout\\"><div><h1>-</h1> <h2>-</h2></div></div></div><script>window.__NUXT__={layout:\\"default\\",data:[{}],error:null,serverRendered:true};</script><script src=\\"/_nuxt/runtime.js\\" defer></script><script src=\\"/_nuxt/pages/background-image.js\\" defer></script><script src=\\"/_nuxt/commons.app.js\\" defer></script><script src=\\"/_nuxt/app.js\\" defer></script>

Original file line number	Diff line number	Diff line change
`@@ -7,12 +7,14 @@ export default function nuxtSvgLoader() {`
`7`	`7`	`options.svgoConfig = options.svgo`
`8`	`8`	`}`
`9`	`9`
`10`		`- this.extendBuild(setupVueSvgLoader(options))`
	`10`	`+ const fileName = this.nuxt.options.build.filenames.img(this.nuxt.options.dev)`
	`11`	`+`
	`12`	`+ this.extendBuild(setupVueSvgLoader(options, fileName))`
`11`	`13`	`}`
`12`	`14`
`13`	`15`	`const svgRulePredicate = rule => rule.test && rule.test.test('.svg')`
`14`	`16`
`15`		`-const setupVueSvgLoader = options => (config) => {`
	`17`	`+const setupVueSvgLoader = (options, fileName) => (config) => {`
`16`	`18`	`// https://github.com/egoist/svg-to-vue-component#nuxtjs-2`
`17`	`19`	`const imageLoaderRule = config.module.rules.find(svgRulePredicate)`
`18`	`20`
`@@ -33,7 +35,7 @@ const setupVueSvgLoader = options => (config) => {`
`33`	`35`	`resourceQuery: /inline/,`
`34`	`36`	`loader: 'file-loader',`
`35`	`37`	`query: {`
`36`		`- name: '[name].[ext]'`
	`38`	`+ name: fileName`
`37`	`39`	`}`
`38`	`40`	`},`
`39`	`41`	`{`