<template>
  <div v-lazy:background-image="image" class="image" @click="onClick">
    <slot />
  </div>
</template>

<script>
export default {
  props: {
    image: {
      type: String,
      required: true
    },
    onClick: {
      type: Function,
      default: f => f
    }
  }
};
</script>


<style lang="scss" scoped>
.image {
  height: 100%;
  width: 100%;
  max-width: 100%;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 300ms ease;
  will-change: opacity;

  &[lazy="loaded"] {
    opacity: 1;
  }
}
</style>
