o-img.vue

<template lang="pug">
figure(v-bem, :modifiers="modifiers", :style="{width:width + 'px', height:height + 'px'}")
  img( :src="url", :alt='alt', :style="{width:width + 'px', height:height + 'px'}")
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      default: ''
    },
    alt: {
      type: String,
      default: ''
    },
    width: {
      type: Number,
      default: 300
    },
    height: {
      type: Number,
      default: 225
    }
  },

  computed: {
    url () {
      return this.src ? this.src : 'http://placehold.it/' + this.width + 'x' + this.height + '/'
    },

    getHeight () {
      return this.height + 'px'
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../styl/common'

+o(image)
  display: block
  position: relative

  img
    display: block
    height: auto
    width: 100%
</style>