# All files / src Pic.vue

0% Statements 0/12
0% Branches 0/6
0% Functions 0/5
0% Lines 0/12

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74

     <template>
        <div :class="['image-wrapper', addClass]">
            <img ref="pic" @load.once="computeWidth" :src="src" :alt="alt" :width="computedWidth" class="img-fluid rounded">
            <div class="image-caption">
                <slot></slot>
            </div>
        </div>
    </template>

    <script>
      import {toNumber} from './utils/utils.js'

      export default {
        props: {
          src: {
            type: String
          },
          alt: {
            type: String
          },
          height: {
            type: String,
            default: ''
          },
          width: {
            type: String,
            default: ''
          },
          addClass: {
            type: String,
            default: ''
          }
        },
        computed: {
          hasWidth () {
            return this.width !== '';
          },
          hasHeight () {
            return this.height !== '';
          },
          computedWidth () {
            if (this.hasWidth) {
              return this.width;
            }
            return this.widthFromHeight;
          }
        },
        data () {
          return {
            widthFromHeight: '',
          }
        },
        methods: {
          computeWidth() {
            if (!this.hasWidth && this.hasHeight) {
              const renderedImg = this.$refs.pic;
              const imgHeight = renderedImg.naturalHeight;
              const imgWidth = renderedImg.naturalWidth;
              const aspectRatio = imgWidth / imgHeight;
              this.widthFromHeight = Math.round(toNumber(this.height) * aspectRatio).toString();
            }
          }
        }
      }
    </script>

    <style>
        .image-wrapper {
            display: inline-block;
            text-align: center;
            padding: 4px;
        }
    </style>