需求分析：
1.根据图片路径，展示不同的图片
2.图片大小

封装组件—》Avatar

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

<script>
export default {
  props: {
    url: {//图片路径
      type: String,
      require: true,
    },
    size: {//图片大小
      type: Number,
    },
  },
};
</script>

<style scoped>
.avatar-img {
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
</style>

需要使用Avatar组件的组件页面：-----》App

<template>
  <div id="app">
    <h1>头像展示</h1>
    <!-- 使用组件 -->
    <Avatar :url="avatarImg1" :size="100" />
    <Avatar :url="avatarImg2" :size="200" />
  </div>
</template>

<script>
// 1.引用组件
import Avatar from "./components/Avatar";
export default {
  name: "app",
  data() {
    return {
      avatarImg1:
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi2.w.yun.hjfile.cn%2Fdoc%2F201412%2F73c85ef4aca048a3a1b71a88a62a8f2a.jpg&refer=http%3A%2F%2Fi2.w.yun.hjfile.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621859790&t=4bb24af5001f2ed9893959f7315d0625",
      avatarImg2:
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201805%2F18%2F20180518171244_kbbkw.thumb.700_0.jpg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621859938&t=7dc32678304952c2adede2865091ba18",
    };
  },
  components: {
    //2.局部注册组件
    Avatar,
  },
};
</script>