[Vuejs]-How can I link background-image [vue cli]

4👍

try doing this:

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

<script>
  export default {
    data() {
      return {
        bgImg: {
          backgroundImage: `url(${require('../assets/images/0.jpg')})`
        }
      }
    }
  }
</script>

1👍

As Mentioned, use a field in data to get the image and link it to your dom.
The template:

  <div
class=" login d-flex justify-content-center align-items-center"
:style="{ background: ` center/cover url(${image})` }"

the data object :

  data() {
return {
  image: require('@/path/to/picture/yourimagehere.jpeg'),
};

},

1👍

The best way is to load it in beforeMount lifecycle hook

beforeMount(){
    const styles = {
      "background": url('../assets/images/0.jpg'),
      "background-size": "cover",
      "background-repeat": "no-repeat",
    };
    Object.assign(document.body.style, styles);
}
👤Anis

1👍

 <div
        class=" search-box car-rims"
        :style="{
          backgroundImage: `linear-gradient( rgba(255, 255, 255, 1.45), rgba(255, 255, 255, 0.45) ), url(
      ${require('@/assets/your-image.jpg')})`,
          backgroundSize: 'cover',
          backgroundRepeat: 'norepeat',
        }"
      >
        
      </div>

Leave a comment