<template>
  <div class="uni-image" v-if="src">
    <div
      :style="{
        backgroundImage: `url(${src})`,
        backgroundPosition: '0% 0%',
        backgroundSize: '100% 100%',
        backgroundRepeat: 'no-repeat',
      }"
    >
      <img :src="src" draggable="false" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'image',
  props: {
    src: {
      type: String,
      default: '',
    },
  },
};
</script>

<style lang="less">
.uni-image {
  width: 320px;
  height: 240px;
  display: inline-block;
  overflow: hidden;
  position: relative;

  div,
  img {
    width: 100%;
    height: 100%;
  }

  img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }
}
</style>
