[Vuejs]-Dynamic background image based on javascript variable

u can use img tag instead of css style

<template>
  <div>
      <img
        :src="url"
      >
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: null
    }
  },
  mounted() {
    this.url = injectImageUrl() // js function to inject url
  }
}
</script>

Maybe you can use props? But I don’t think it’s possible to access the props from inside the style tag. The only way to do this is by using inline styling.

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

<script>
  export default {
    props: {
      imgUrl: {
        type: String,
      }
    },
  }
</script>