CODEWITHSUNDEEP
cssvue.jsbackground-image
Bernd82
Bernd82

Reputation: 33

Vue.js: How can I set a background image during "mounted" of a component?

The imageName shall be changed by a variable. In the end I want the component to have a background image depending on an parameter in it's URL.

<template>
  <div :style="background-image: {{imageName}}">
  </div>
</template>

<script>
export default {
  name:"niceName",
  data:()=> ({
    imageName:"",
  }),
  mounted() {
    imageName="@/assets/images/backgrounds/img/"+anyVariable.anyImgName;
  }
}
</script>

<style>
</style>

Upvotes: 0

Views: 832

Answers (2)

Bernd82
Bernd82

Reputation: 33

Thanks to lyashi I could find this solution:

<template>
  <div :style="{backgroundImage:'url('+imageName+')'}">
  </div>
</template>

<script>
export default {
  name:"niceName",
  data:()=> ({
    imageName:"",
  }),
  mounted() {
    this.imageName=require('@/assets/images/backgrounds/'+anyVariable.anyImgName);
  }
}
</script>

<style>
</style>

Thy magic is in the :style= syntax with the curly braces.

Upvotes: 0

Iyashi
Iyashi

Reputation: 572

You have to require() the image, so that the @-alias can be resolved.

export default {
  mounted () {
    this.imageName = require(`@/assets/images/backgrounds/img/${dynamicPath}`)
  }
}

Also: in your <script>, you have to use this.[property-name], since without it, you'd set a local variable which only exists in mounted()-scope.

Upvotes: 2

Related Questions