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

NemoAlex · 2017-02-15T05:34:37Z

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?

The text was updated successfully, but these errors were encountered:

Krispomoho · 2017-02-17T09:01:08Z

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

NemoAlex · 2017-02-17T09:07:27Z

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

yyx990803 · 2017-02-19T03:03:54Z

Why not just use CSS instead of inline styles?

blade254353074 · 2017-03-03T02:08:53Z

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 · 2017-03-03T02:16:32Z

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

blade254353074 · 2017-03-03T02:50:59Z

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

NemoAlex · 2017-03-03T02:54:20Z

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

blade254353074 · 2017-03-03T05:53:25Z

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

willChowFront · 2017-03-29T07:21:05Z

@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 · 2017-07-10T22:43:12Z

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 · 2018-03-31T10:35:39Z

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

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

johnyluyte · 2018-05-15T08:39:10Z

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 · 2018-06-13T18:20:53Z

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 · 2018-06-16T19:38:20Z

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"
    };
  },

steelegg · 2018-07-15T08:17:18Z

我没有找到更好的方法
I didn't find a better way.
但这样也可以解决我的问题
But it can also solve my problem.
如下:
as follows

<div  :style="{'background-image':'url('+backgroundUrl+');'}">

 data() {
         return { backgroundUrl:require('~/static/img/ads.png') }
        },

or

data(){
         return { backgroundUrl:'http://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1532246957&di=5c7453291ff3ca5963cca9c40a0be2ca&imgtype=jpg&src=http%3A%2F%2Fimg6.bdstatic.com%2Fimg%2Fimage%2Fpcindex%2Ftongmengpctufanbingbing.jpg' }
}

Ubunfu · 2018-09-03T04:49:12Z

I was able to accomplish what I believe is a similar end goal by using a computed property to build a collection of individual CSS attributes (dynamic or not), and then assign the whole group to the DOM element as an inline style.

Template:

<div class="movie-wrapper" :style="styles">
</div>

Computed Props:

<script>
const BACKDROP_BASE = 'https://image.tmdb.org/t/p/w1280';
export default {
    computed: {
        styles() {
            return {
                'background-image': `url(${BACKDROP_BASE}/${this.movie.backdrop_path})`,
                'background-repeat': 'no-repeat',
                'background-size': 'cover'
            }
        }
    }
}

And I could still attach additional properties with normal CSS, but it looks like any properties assigned via the computed property may take precedence as I think they are applied on top of the regular CSS.

Regular CSS:

<style scoped>
.movie-wrapper {
    position: relative;
    padding-top: 50vh;
}
</style>

vitortraut95 · 2018-10-05T13:14:26Z

Vue.filter('ifEmptyFoto',  function(value) {
      if (!value || value == "") { return 'images/foto_padrao.jpg'; }
      else return value;
})
Vue.filter('bgImage',  function(value) {
      return 'background-image: url('+ value +');';
})

<div class="foto" :style="caminhoImagem | ifEmptyFoto| bgImage"></div>

fix vuejs/vue-loader#646

terryjohnpaul · 2018-12-05T04:54:37Z

body
{background-image: url(image link);
background-size:cover;
}

//place it in style tag..it worked for me

adoniskrasniqi · 2018-12-19T12:04:52Z

Why not just use CSS instead of inline styles?

Dynamic data.

onuriltan · 2019-01-16T21:57:49Z

Hello everyone, if you want to use css background property from your assests, you can use it as follows;
background-image: url('~@/assets/img.jpeg');
If you want to know how this works, you can read it from here. Hope this helps :)

Seanmclem · 2019-01-26T02:50:46Z

I had to format mine like this with url('')
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');

jaeyholic · 2019-02-28T14:29:07Z

I had difficulties with how to set dynamic background images in nuxt but i did it and it worked perfectly.

In SCRIPT
computed: {
service() {
return this.services.find(service => service.id === this.id)
},
backgroundURL() {
return require(~/assets/img/bgheads/${this.service.head})
}
}

In HTML

just in case if someone is also finding the same problems i faced. it took me some hours to figure it out

Farb · 2019-12-17T04:20:01Z

I did it,but I fell it is annoying! It would be better if I can wirte the picture path directly! 😄

pratyushtewari · 2019-12-26T23:31:44Z

#646 (comment)

Hello everyone, if you want to use css background property from your assests, you can use it as follows;
background-image: url('~@/assets/img.jpeg');
If you want to know how this works, you can read it from here. Hope this helps :)

We need to put this into the nuxt documentation. Please!

onuriltan · 2019-12-27T09:26:44Z

#646 (comment)

Hello everyone, if you want to use css background property from your assests, you can use it as follows;
background-image: url('~@/assets/img.jpeg');
If you want to know how this works, you can read it from here. Hope this helps :)

We need to put this into the nuxt documentation. Please!

Let me try it with Nuxt! Then I can send a pr to nuxt docs :)

onuriltan · 2019-12-27T09:56:12Z

#646 (comment)

Hello everyone, if you want to use css background property from your assests, you can use it as follows;
background-image: url('~@/assets/img.jpeg');
If you want to know how this works, you can read it from here. Hope this helps :)

We need to put this into the nuxt documentation. Please!

Let me try it with Nuxt! Then I can send a pr to nuxt docs :)

Actually Next Team stated about this issue in the docs, I read it carefully in order to catch the info :)

pratyushtewari · 2019-12-29T23:57:29Z

@onuriltan I saw this on nuxt, but your solution had both ~ and @ together and which is not mentioned in the nuxt documentation.

In the sass and css files I need to use the "@" path.
In the scoped css inside the vue files I need to use your solution the "~@" together.

onuriltan · 2019-12-30T09:21:22Z

@pratyushtewari actually I tried those

~assets/img.jpeg = worked
@assets/img.jpeg = didn't work
~@/assets/img.jpeg = worked

Yes the guide is a little bit misleading, I can open a pr but just in english language :)

coolternet · 2020-03-07T22:06:54Z

@pratyushtewari actually I tried those

~assets/img.jpeg = worked

@assets/img.jpeg = didn't work

~@/assets/img.jpeg = worked

Yes the guide is a little bit misleading, I can open a pr but just in english language :)

it doesn't work for me

kayoderock · 2020-06-15T23:14:44Z

Don't waste time, @onuriltan is right.

arijitnaskar · 2020-08-12T08:11:48Z

This is Working for me:

:style="
    { backgroundImage: 'url(' + require('../assets/images/bg1.jpg') + ')'}"

But This is throwing compile error:

:style="
   { backgroundImage: 'url(' + require('../assets/images/bg1.jpg') + ')' ,
   backgroundSize:'cover'}"

Can someone help please.

Error:

Errors compiling template:

  invalid expression: Unexpected token ':' in

    
    { backgroundImage: 'url(' + require('../assets/images/bg1.jpg') + ')' ,
    backgroundSize:'cover'}

pratyushtewari · 2020-08-12T16:34:43Z

@arijitnaskar - Can you try this and see if this works?

:style="{ backgroundImage: url('" + require('../assets/images/bg1.jpg') + "') , backgroundSize: cover}"

arijitnaskar · 2020-08-13T23:45:43Z

Mine is working with this:

:style="
    [{ backgroundImage: 'url(' + require('../assets/images/bg1.jpg') + ')' 
   },{backgroundSize:'100%'},{backgroundPosition:'center bottom'}]"

nejat-njonjo · 2021-03-28T09:10:53Z

Close this.

EmmyMay · 2021-05-11T16:07:38Z

I am having this same issue. The path is resolving correctly but not as a string.

nejat-njonjo · 2021-05-18T19:13:39Z

Solutions were provided above.

VivianS-GitHub · 2021-07-19T09:41:41Z

I was able to accomplish what I believe is a similar end goal by using a computed property to build a collection of individual CSS attributes (dynamic or not), and then assign the whole group to the DOM element as an inline style.

Template:
<div class="movie-wrapper" :style="styles">
</div>
Computed Props:
<script>
const BACKDROP_BASE = 'https://image.tmdb.org/t/p/w1280';
export default {
    computed: {
        styles() {
            return {
                'background-image': `url(${BACKDROP_BASE}/${this.movie.backdrop_path})`,
                'background-repeat': 'no-repeat',
                'background-size': 'cover'
            }
        }
    }
}
And I could still attach additional properties with normal CSS, but it looks like any properties assigned via the computed property may take precedence as I think they are applied on top of the regular CSS.

Regular CSS:
<style scoped>
.movie-wrapper {
    position: relative;
    padding-top: 50vh;
}
</style>

how if hving multiple image?

kuitao1018 · 2021-10-14T02:00:38Z

:style="{ 'background-image': 'url(' + ImgData + ')' }"

Penguin-learning-to-walk · 2023-01-30T06:22:27Z

мне помогло следующее :
<footer class="footer-area bg-img background-overlay" style="background-image: url('src/assets/img/bg-img/4.jpg');">

yyx990803 closed this as completed Nov 7, 2017

UncleBill added a commit to UncleBill/component-compiler-utils that referenced this issue Oct 26, 2018

supports uri fragment in static style transformed require

817ad5e

fix vuejs/vue-loader#646

UncleBill mentioned this issue Oct 26, 2018

supports uri fragment in static style transformed require vuejs/component-compiler-utils#37

Open

UncleBill added a commit to UncleBill/component-compiler-utils that referenced this issue Oct 28, 2018

supports uri fragment in static style transformed require

4ad0f01

fix vuejs/vue-loader#646

UncleBill added a commit to UncleBill/component-compiler-utils that referenced this issue Oct 31, 2018

supports uri fragment in static style transformed require

2745842

fix vuejs/vue-loader#646

kokars mentioned this issue Apr 20, 2020

Relative static assets in CSS folder vuejs-templates/webpack#932

Open

diachedelic mentioned this issue Nov 7, 2020

relative paths in SCSS cause ModuleNotFoundError vuejs/vue-cli#5633

Closed

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

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

Comments

NemoAlex commented Feb 15, 2017

Krispomoho commented Feb 17, 2017

NemoAlex commented Feb 17, 2017

yyx990803 commented Feb 19, 2017

blade254353074 commented Mar 3, 2017

NemoAlex commented Mar 3, 2017

blade254353074 commented Mar 3, 2017

NemoAlex commented Mar 3, 2017

blade254353074 commented Mar 3, 2017

willChowFront commented Mar 29, 2017

shshaw commented Jul 10, 2017

dimitrieh commented Mar 31, 2018

johnyluyte commented May 15, 2018

PierBover commented Jun 13, 2018

chandregowda commented Jun 16, 2018

steelegg commented Jul 15, 2018 • edited Loading

Ubunfu commented Sep 3, 2018

Template:

Computed Props:

Regular CSS:

vitortraut95 commented Oct 5, 2018 • edited Loading

terryjohnpaul commented Dec 5, 2018 • edited Loading

adoniskrasniqi commented Dec 19, 2018

onuriltan commented Jan 16, 2019 • edited Loading

Seanmclem commented Jan 26, 2019

jaeyholic commented Feb 28, 2019

{{service.name}}

Farb commented Dec 17, 2019 • edited Loading

pratyushtewari commented Dec 26, 2019 • edited Loading

onuriltan commented Dec 27, 2019

onuriltan commented Dec 27, 2019

pratyushtewari commented Dec 29, 2019

onuriltan commented Dec 30, 2019 • edited Loading

coolternet commented Mar 7, 2020

kayoderock commented Jun 15, 2020

arijitnaskar commented Aug 12, 2020

pratyushtewari commented Aug 12, 2020

arijitnaskar commented Aug 13, 2020

nejat-njonjo commented Mar 28, 2021

EmmyMay commented May 11, 2021

nejat-njonjo commented May 18, 2021

VivianS-GitHub commented Jul 19, 2021

Template:

Computed Props:

Regular CSS:

kuitao1018 commented Oct 14, 2021

Penguin-learning-to-walk commented Jan 30, 2023 • edited Loading

steelegg commented Jul 15, 2018 •

edited

Loading

vitortraut95 commented Oct 5, 2018 •

edited

Loading

terryjohnpaul commented Dec 5, 2018 •

edited

Loading

onuriltan commented Jan 16, 2019 •

edited

Loading

Farb commented Dec 17, 2019 •

edited

Loading

pratyushtewari commented Dec 26, 2019 •

edited

Loading

onuriltan commented Dec 30, 2019 •

edited

Loading

Penguin-learning-to-walk commented Jan 30, 2023 •

edited

Loading