background-image in style property, what is the best practice?

[NemoAlex]

In .vue template, we usually use img tag to show a image, like

<img src="./link/to/image.png">

which is OK.
However sometime we need to use background-image within inline style property:

<div style="background-image: url(./link/to/image.png)"

But it's not working, somehow I need to write it like this:

<div :style="{'background-image': 'url(' + require('./link/to/image.png') + ')'}">

or the ES2015 way:

<div :style="{'background-image': `url(${require('./link/to/image.png')})`}">

which is still not neat.
So I'm just wondering is there any better way to do this?

[Krispomoho]

I have met the same question, especially the image can't be converted as base64

[NemoAlex]

Maybe it's a bad idea to use base64 image in style property, it makes HTML kinda ugly.

[yyx990803]

Why not just use CSS instead of inline styles?

[blade254353074]

Required images is transformed to base64 DataURI is due to the limit option of url-loader.
You can reduce the limit, may be 10000 (bytes). It's useful to reduce the number of requests.

Then, vue-loader is piping <style></style> to the corresponding loader (depends on your config).
Such as scss-loader, postcss-loader, css-loader, style-loader, and css-loader will piping the results to url-loader and file-loader.
So you can just write css to instead of inline styles:

url(image.png) => require('./image.png')
url(~module/image.png) => require('module/image.png')

[NemoAlex]

@yyx990803 @blade254353074 I know what we CAN. But it's a little bit annoying to do these workarounds.

[blade254353074]

For reducing requests, url-loader limit option must be configured......Although it's annoying.

[NemoAlex]

@blade254353074 I believe the size limitation is not relevant in this conversation.

[blade254353074]

@NemoAlex But you said "base64 image in style property makes HTML kinda ugly"...

[willChowFront]

@yyx990803 I have the same issue .I need change this background-image frequently by data in component, in css , i can't find a way to solve it

[shshaw]

This isn't really vue-loader's fault, but I kept running into a similar issue where an image URL contained a space, so the style was invalid and would not appear on the element.

Ensure your backgroundImage declarations are wrapped in url( and quotes so the style works correctly, no matter the file name.

ES2015 Style:

<div :style="{ backgroundImage: `url('${image}')` }"></div>

Or without ES2015:

<div :style="{ backgroundImage: 'url(\'' + image + '\')' }"></div>

[dimitrieh]

for Googlers, I had success with (using Nuxt):

:style="{ backgroundImage: 'url(' + require(@/assets/img/${page.image}) + ')' }"

[johnyluyte]

for Googlers, I has success with (same using Nuxt):

:style="{ backgroundImage: 'url(' + require('@/assets/imgs/bg'+backgroundId+'.png') + ')' }"

@dimitrieh 's answer is indeed correct, but his Template literals was "absorbed" by github's Markdown parser. If you copy his code from his comment directly, the code is not going to work.

However if you are using ES2015 you should be using Template literals. My code here is just for understanding the concept.

[PierBover]

Again, for Googlers...

In my case (an old Vue project) the problem seemed to be that the image wasn't being bundled by Webpack, even if the URL was right. Using require(...) returns the correct URL in the final bundle, but will also "tell Webpack" to bundle the image.

[chandregowda]

I placed the image inside public/img/<image.jpg> and then referred the image path mentioned in data property

<div class="text-center mb-4" :style="{ backgroundImage: url('${bgImage}')}">

data() {
    return {
      bgImage: "/img/virtual-mac.jpg"
    };
  },