Using svg as background-image does not work

When you use the default options and rules given here, svg paths cannot be used in CSS background-image: url() anymore.

Example:

background-image: url('~/assets/some-icon.svg')

Output

background-image: url('[Object object]')

Expected

background-image: url("data:image/svg+xml;utf8,<svg> optimized svg </svg>");

This would require https://github.com/bhovhannes/svg-url-loader to work

The webpack config could then look like that, I tried to make it work locally, but somehow the resulting SVG data gets escaped (guess this is some kind of nuxt XSS protection).

config.module.rules.push({
  test: /\.svg$/,
  oneOf: [
    {
      resourceQuery: /css/,
      use: {
        loader: 'svg-url-loader',
        options: { noquotes: false }
      }
    },
    {
      use: [
        'vue-loader',
        {
          loader: 'svg-to-vue-component/loader',
          options
        }
      ]
    }
  ]
})

You could use it then like this:

background-image: url('~/assets/some-icon.svg?css')

[stouch]

just for the record, since @3b3ziz has modified it himself 👍 , the good way is now :

background-image: url('~/assets/some-icon.svg?inline')

[priyeshvadhiya]

Here it is way to resolve them.

:style=“{ backgroundImage: ‘url(’ + require(@/assets/img/${page.image}) + ‘)’ }”