[Vuejs]-Use component variable in style attribute

by

0👍

You’re using v-bind:style wrong, use:

<p v-bind:style="{ backgroundImage: 'url(' + $IMG_PATH + '/carousel1.jpeg)' }"></p>

Example:

Vue.prototype.$IMG_PATH = 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/701'

new Vue({
  el: "#app"
})
p {
  height: 300px;
}
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <p v-bind:style="{ backgroundImage: 'url(' + $IMG_PATH + '/beer-main-0-1496757601.jpg)' }">foobar</p>
</div>

Leave a comment