Vue js data-bind style backgroundImage not working

Question

I m trying to bind the src of an image in an element  but it doesn t seem to work  I m getting an  Invalid expression  Generated function body     backgroundImage   url image       The documentation says to use either  Kebab-case  or  camel-case     lt div class  circular  v-bind style    backgroundImage    url image     gt  lt  div gt    Heres a fiddle  https   jsfiddle net 0dw9923f 2

User · Answer

lt div  style    backgroundImage   url   post image       gt    there are multiple ways but i found template string easy and simple

User · Answer

I tried  david answer  and it didn t fix my issue  after a lot of hassle  I  made a method and return the image with style string    HTML Code   lt div v-for  slide in loadSliderImages   key  slide id  gt       lt div v-else  style  bannerBgImage slide banner   gt  lt  div gt   lt  div gt    Method  bannerBgImage image       return  background-image  url      image

User · Answer

Based on my knowledge  if you put your image folder in your public folder  you can just do the following      lt div  style  quot  backgroundImage   url   project imagePath     quot  gt  lt  div gt   If you put your images in the src assets   you need to use require  Like this      lt div  style  quot  backgroundImage   url   require    assets   project image       quot  gt        lt  div gt   One important thing is that you cannot use an expression that contains the full URL like this project image      assets image png   You need to hardcode the   assets   part  That was what I ve found  I think the reason is that in Webpack  a context is created if your require contains expressions  so the exact module is not known on compile time  Instead  it will search for everything in the   assets folder  More info could be found here  Here is another doc explains how the Vue loader treats the link in single file components

User · Answer

The issue is that the value for backgroundImage needs to be a string like this    lt div class  circular  v-bind style    backgroundImage   url     image          gt  lt  div gt    Here s a simplified fiddle that s working  https   jsfiddle net 89af0se9 1   Re  the comment below about kebab-case  this is how you can do that    lt div class  circular  v-bind style     background-image    url     image          gt  lt  div gt    In other words  the value for v-bind style is just a plain Javascript object and follows the same rules   UPDATE  One other note about why you may have trouble getting this to work   You should make sure your image value is quoted so that the end resulting string is   url  some url path to image jpeg     Otherwise  if your image URL has special characters in it  such as whitespace or parentheses  the browser may not apply it properly  In Javascript  the assignment would look like   this image     some url path to image jpeg     or  this image         myUrl         Technically  this could be done in the template  but the escaping required to keep it valid HTML isn t worth it   More info here   Is quoting the value of url   really necessary

User · Answer

Binding background image style using a dynamic value from v-for loop could be done like this     lt div v-for  i in items   key  n      style   backgroundImage   url   require    assets cars   i src   jpg         gt   lt  div gt

User · Answer

Another solution   lt template gt     lt div  style  quot cssProps quot  gt  lt  div gt   lt  template gt    lt script gt    export default       data           return           cssProps              backgroundImage   url   require    assets path to your img jpg                                   lt  script gt   What makes this solution more convenient  Firstly  it s cleaner  And then  if you re using Vue CLI  I assume you do   you can load it with webpack  Note  don t forget that require   is always relative to the current file s path

User · Answer

I experienced an issue where background images with spaces in the filename where causing the style to not be applied  To correct this I had to ensure the string path was encapsulated in single quotes   Note the escaped    in my example below    lt div  style        height   100px       backgroundColor    323232       backgroundImage   url       event image              backgroundPosition   center center       backgroundSize   cover         gt   lt  div gt

User · Answer

The accepted answer didn t seem to solve the problem for me  but this did Ensure your backgroundImage declarations are wrapped in url  and quotes so the style works correctly  no matter the file name  ES2015 Style   lt div  style  quot   backgroundImage   url    image       quot  gt  lt  div gt   Or without ES2015   lt div  style  quot   backgroundImage   url       image           quot  gt  lt  div gt   Source  vuejs vue-loader issue  646

User · Answer

For single repeated component this technic work for me   lt div class  img-section   style img section style  gt   computed                img section style  function                    var bgImg  this post data fet img                 return                        color    red                        border     5px solid                         background    url   bgImg

User · Answer

lt div  style    background-image    url     require    assets media img jpg           gt  lt  div gt

[javascript] Vue.js data-bind style backgroundImage not working

Examples related to javascript

Examples related to html

Examples related to css

Examples related to vue.js