<template>
  <picture v-lazyload>
    <source :data-srcset="url" type="image/webp">
    <source :data-srcset="source" :type="type"> 
    <img :data-url="source" :alt="alt">
  </picture>
</template>

<script>
import LazyLoadDirective from '@//directives/LazyLoadDirective'

export default {
  name: 'image-item',
  directives: {
    lazyload: LazyLoadDirective,
  },
  props: {
    source: {
      type: String,
      required: true,
    },
    alt: {
      type: String,
      required: true,
    }
  },
  computed: {
    type() {
      if (typeof this.source === 'string') {
        const SOURCE = this.source.split('.')
        if (SOURCE[1] === 'jpg') {
          return 'image/jpeg'
        } else if (SOURCE[1] === 'png') {
          return 'image/png'
        }
      }
      return ''
    },
    url() {
      return typeof this.source === 'string' ? this.source.split('.')[0] : ''
    }
  }
}
</script>
