Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using svg as background-image does not work

See original GitHub issue

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


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


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


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

This would require 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).

  test: /\.svg$/,
  oneOf: [
      resourceQuery: /css/,
      use: {
        loader: 'svg-url-loader',
        options: { noquotes: false }
      use: [
          loader: 'svg-to-vue-component/loader',

You could use it then like this:

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

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:14
  • Comments:10 (4 by maintainers)

github_iconTop GitHub Comments

stouchcommented, Apr 13, 2020

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

background-image: url('~/assets/some-icon.svg?inline')
priyeshvadhiyacommented, Jun 27, 2019

Here it is way to resolve them.

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

SVG CSS background image not showing in Chrome
Maybe some browsers/OS have problems in rendering the svg in this way. Since it is not a real SVG just convert it in...
Read more >
Why doesn't my SVG background-image work? - Stack Overflow
Try clearing your browser cache and refreshing once, and try other browsers too. Also, if by some chance you happen to be using...
Read more >
How to add SVGs with CSS (background-image)
Notice with this method we have to treat the SVG code before it will work. In the example, we convert the SVG to...
Read more >
Using svg for background - The freeCodeCamp Forum
The other issue might be in how you linked them. You might try embedding inline svg instead (which can be done in HTML...
Read more >
SVG background image not showing - Essential Objects
However, if using a very simple image, it has benefits to use scalable vector graphics. The html below works fine in multiple web...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found