0

I am trying to set background image inside one of the vue component. I am using rails 6. The images are located inside app/assets/images folder. The vue components are located inside app/javascripts/pages/Login.vue

The following code works:

<v-img :src="require('../../assets/images/logo.png')"/>

However, this does not work:

<v-flex xs3 :style="'background-image: url(' + require('../../assets/images/site-banner.png') + ')'">
...
</v-flex>

Any help is appreciated. Thanks.

priosshrsth
  • 1,070
  • 2
  • 11
  • 30

1 Answers1

0

I suggest you should remove require in the :style and make sure the path of image can be access from url. Require is keyword for javascript importing, not for :style, or you can assign the path of image as a data attribute to add to :style

I did that locally and it works 

const imagePath = 'YOUR_HOST_NAME/assets/logo.png';

export default {

  computed: {

     myStyle() {
      return {"background-image": 'url(' + imagePath + ')'}
     }

}

Then you can use myStyle as :style="myStyle"

Linh Nguyen
  • 925
  • 1
  • 10
  • 23
  • You should try extract the path of the file as a data property – Linh Nguyen Nov 17 '19 at 15:07
  • 1
    and first just try some static image from internet to see if it works first, if you get any issues, just let me know here – Linh Nguyen Nov 17 '19 at 15:48
  • More references: https://stackoverflow.com/questions/47313165/how-to-reference-static-assets-within-vue-javascript – Linh Nguyen Nov 17 '19 at 15:54
  • so it should work if you do it properly, what is the problem now? – Linh Nguyen Nov 18 '19 at 04:35
  • sorry, it was my mistake, turns out image was waroking, but content inside `v-flex` was hiding it. I tried to use static images from internet in that element, and it didn't show up as well. After modifyiong content inside v-flex, it worked. Thanks for the help. – priosshrsth Nov 18 '19 at 05:59