fix: use image name function when using inline query

Developmint · Jan 22, 2020 · c90a8ed · c90a8ed
1 parent 9df6300
commit c90a8ed
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
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>