图片组件 width和height一致时

第一步：创建一个img组件

componentsAvatar.vue

<template>
  <div>
    <img
      class="avatar-img"
      :src="url"
      v-bind:style="{ width: size + 'px', height: size + 'px' }"
    />
 
  </div>
</template>

<script>
export default {
  props: {
    url: {
      //属性的类型
      type: String, //url  属性的约束 类型是字符串
      required: true, //属性必传
    },  
    size: {
      //宽度和高度一致时，可以这样写
      type: Number,
    },
    
  },
};
</script>

<style scoped>
.avatar-img {
  border-radius: 50%;
  object-fit: cover;
}
.avatar-img1 {
  margin-left: 30px;
  border-radius: 10px;
  object-fit: cover;
}
</style>

第二步 app.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <Avatar :url="img" :size="100"> </Avatar>
    <!--:url=" js 表达式  字面量 函数">-->
  </div>
</template>

<script>
import Avatar from "./components/Avatar.vue";
export default {
  name: "App", //如果组件没有在注册的时候指定名字，则使用该名字
  components: {
    Avatar,
  },
  data() {
    return {
      img: require("@/assets/pic.jpg"),   
    };
  },
};
</script>

<style></style>