[Vuejs]-Vuejs show default image if no imagedata is found for 2 properties

by

0👍

✅

Below is what worked best in my case.

<img v-if="selImage" :src="path+selImage" />
                <img v-else-if="imageData" :src="imageData" />
                <img  v-else src="example.com/myimage.jpg"/>

1👍

You can create computed property:

new Vue({
  el: "#app",
  data() {
    return {
      path: `https://example.com/`,
      selImage: '',
      imageData: '',
    }
  },
  computed: {
    getImg() {
      if(!this.selImage && !this.imageData) return 'https://picsum.photos/200'
      return this.selImage ? this.path + this.selImage : this.path + this.imageData
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <img :src="getImg" />
</div>

Leave a comment