<template>
  <image class="ml-image" :class="className" :src="url" :mode="mode" :style="imgStyles"></image>
</template>

<script>
export default {
  name: 'MlImage',
  options: {
    virtualHost: true
  },
  props: {
    url: String,
    className: String,
    mode: {
      type: String,
      default: 'aspectFit'
    },
    width: [String, Number],
    height: [String, Number]
  },
  computed: {
    imgStyles () {
      const width = this.width
      const height = this.height
      const wSty = width ? `width: ${isNaN(width) ? width : `${width}rpx`};` : ''
      const hSty = height ? `height: ${isNaN(height) ? height : `${height}rpx`};` : ''
      return `${wSty}${hSty}`
    }
  }
}
</script>

<style lang="scss">
.ml-image {
  width: 80rpx;
  height: 80rpx;
}
</style>
