<template>
  <vue-load-image>
    <img slot="image" :alt="alt" :src="src" />
    <div slot="preloader" :style="'min-height: '+placeHolder.minHeight+'; min-width: '+placeHolder.minWidth" class="loc-image-placeholder">
      <ion-spinner></ion-spinner>
    </div>
    <div slot="error" :style="'min-height: '+placeHolder.minHeight+'; min-width: '+placeHolder.minWidth" class="loc-image-placeholder">
      <span>Image could not be loaded.</span>
    </div>
  </vue-load-image>
</template>

<script lang="ts">
import VueLoadImage from 'vue-load-image'

export default {
  components: {
    VueLoadImage,
  },
  props: {
    src: { 
      type: String,
    },
    alt: { 
      type: String,
      defalt: 'Image could not be loaded.',
    },
    placeHolder: {
      type: Object,
      default() {
        return {
          minHeight: '200px',
          minWidth: '100%',
        };
      },
    },
  },
}
</script>

<style scoped lang="css">
  .loc-image-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>