<template>
  <div v-if="isLoading">loading....</div>
  <img v-else ref="image" :src="image" class="c-image" @error="onImageLoadError">
</template>

<script>

export default {
  props: {
    src: String,
    placeholder: {
      type: String,
      default: require('@assets/images/Cacto.svg')
    }
  },

  data () {
    return {
      image: '',
      isLoading: false
    }
  },

  watch: {
    image: {
      immediate: true,
      handler: 'setImage'
    }
  },

  methods: {
    onImageLoadError () {
      this.isLoading = true

      this.$refs.image.src = this.placeholder

      this.isLoading = false
    },

    loadImage () {
      try {
        this.image = this.src || this.placeholder
      } catch (error) {
        this.image = this.placeholder
      }
    },

    setImage () {
      this.isLoading = true

      this.loadImage()

      this.isLoading = false
    }
  }
}
</script>