bootstrap-vue/src/components/card/card-img.js

BootstrapVue provides one of the most comprehensive implementations of Bootstrap 4 components and grid system for Vue.js and with extensive and automated WAI-ARIA accessibility markup.

import { mergeData } from 'vue-functional-data-merge'

export const props = {
  src: {
    type: String,
    default: null,
    required: true
  },
  alt: {
    type: String,
    default: null
  },
  top: {
    type: Boolean,
    default: false
  },
  bottom: {
    type: Boolean,
    default: false
  },
  fluid: {
    type: Boolean,
    default: false
  }
}

export default {
  functional: true,
  props,
  render (h, { props, data, slots }) {
    let staticClass = 'card-img'
    if (props.top) {
      staticClass += '-top'
    } else if (props.bottom) {
      staticClass += '-bottom'
    }

    return h(
      'img',
      mergeData(data, {
        staticClass,
        class: { 'img-fluid': props.fluid },
        attrs: { src: props.src, alt: props.alt }
      })
    )
  }
}