vuepress/dockerbuild/dot_vuepress/components/myimg.vue

<template>
  <div class="divimg">
      <img :src="path" :width="nwidth" :style="style">
  </div>
</template>

<style scoped>
.divimg {
  text-align : center ;
}

img {
  border : 1px solid purple ;
  object-fit: contain ;
}
</style>


<script>

export default {

  computed : {
    path : function() {
      return "/" + this.me + "/images/" + this.data ;
    }  ,

    nwidth : function() {


      return this.width || '80%' ;
    }

  } ,

  props : {
    me : String ,
    data : String ,
    dim : String ,
    width : String ,
  } ,

  data() {
    return {
      style : {}
    }

  } ,

  mounted : function() {

      if ( this.dim ) {
        this.style = {} ;
        const regex = /(\d+)x(\d+)/;
        const found = this.dim.match(regex);
        if ( found[1] > 0 ) {
          this.style['width'] = found[1] + "px" ;
        }
        if ( found[2] > 0 ) {
          this.style['height'] = found[2] + "px" ;
        }
        console.log ( { style : this.style } ) ;
      }

  } ,

  methods : {


  }

}
</script>