[Vuejs]-Dynamic image binding vue js

by

0👍

Use data property

var app = new Vue({
  el: '#app',
  data: {
    imgSrc: null
  },
  methods: {
    getFeatureMedia: function(id) {
      axios.get('http://wowitsolutions.com/wp-json/wp/v2/media/' + id)
        .then(result => {
          this.imgSrc = result.data.source_url;
        }, (eror) => {
          alert(error)
        })
    }
  },
  created() {
    this.getFeatureMedia(11027)
  }
})
img {
  width: 100px;
}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="app">
  <img v-if="imgSrc" v-bind:src="imgSrc">
</div>

Leave a comment