How to fix Vue.js data-bind style background image not working with JavaScript?

Spread the love

Sometimes, we want to fix Vue.js data-bind style background image not working with JavaScript.

In this article, we’ll look at how to fix Vue.js data-bind style background image not working with JavaScript.

How to fix Vue.js data-bind style background image not working with JavaScript?

To fix Vue.js data-bind style background image not working with JavaScript, we set the 'background-image' property.

For instance, we write

<template>
  <div :style="cssProps"></div>
</template>

<script>
export default {
  data() {
    return {
      cssProps: {
        `background-image': `url(${require('@/assets/path/to/your/img.jpg')})`
      }
    }
  }
}
</script>

to define the cssProps reactive property that sets the “background-image’` to the URL string with the background image URL.

We use require to resolve the image URL to the right location.

Conclusion

To fix Vue.js data-bind style background image not working with JavaScript, we set the 'background-image' property.

Leave a Reply

Your email address will not be published. Required fields are marked *