Vue Dynamic Background Image Inline Component

I'm building a banner with Vue that needs to have a dynamic background, however, it doesn't seem to be working. Not sure what I'm doing wrong. I've tried a few other ways and it wo

Solution 1:

Looks like you've just got some syntax errors in your style attribute around string quoting. Try

<div:style="{ backgroundImage: `url(${require('@/assets/images/' + backgroundImage)})` }">

---

Might be easier to create some computed properties to resolve everything though

computed: {
  bgImage () {
    returnrequire('@/assets/images/' + this.backgroundImage)
  },
  inlineStyle () {
    return {
      backgroundImage: `url(${this.bgImage})` 
    }
  }
}

and

<div:style="inlineStyle">

Demo ~ https://codesandbox.io/s/crimson-sky-ehn9r