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

With more than 85 components, over 45 available plugins, several directives, and 1000+ icons, BootstrapVue provides one of the most comprehensive implementations of the Bootstrap v4 component and grid system available for Vue.js v2.6, complete with extens

import Vue from '../../vue'
import { NAME_SKELETON_IMG } from '../../constants/components'
import { BAspect } from '../aspect'
import { BSkeleton } from './skeleton'

// @vue/component
export const BSkeletonImg = /*#__PURE__*/ Vue.extend({
  name: NAME_SKELETON_IMG,
  functional: true,
  props: {
    animation: {
      type: String
    },
    aspect: {
      type: String,
      default: '16:9'
    },
    noAspect: {
      type: Boolean,
      default: false
    },
    height: {
      type: String
    },
    width: {
      type: String
    },
    variant: {
      type: String
    },
    cardImg: {
      type: String
    }
  },
  render(h, { props }) {
    const { aspect, width, height, animation, variant, cardImg } = props

    const $img = h(BSkeleton, {
      props: {
        type: 'img',
        width,
        height,
        animation,
        variant
      },
      class: { [`card-img-${cardImg}`]: cardImg }
    })

    return props.noAspect ? $img : h(BAspect, { props: { aspect } }, [$img])
  }
})