样式预览

注释代码

<template><div class="img-box":style="{                //动态style必须为对象width: size + 'rem',height: size + 'rem'}"><imgclass="avatar-img":src="url"    //动态url/></div>
</template><script>
export default {props:{    //外部传参url:{type: String,   //属性必须为字符串required: true, //属性必传},size:{type: Number,}}
}
</script><style lang="less" scoped>    //lang="less"    使用less /scoped->局部style.img-box{display: block;border-radius: 50%;overflow: hidden;img{width: 100%; height: 100%;}}
</style>

可运行代码

<template><div class="img-box":style="{width: size + 'rem',height: size + 'rem'}"><imgclass="avatar-img":src="url"/></div>
</template><script>
export default {props:{url:{type: String,   //属性必须为字符串required: true, //属性必传},size:{type: Number,}}
}
</script><style lang="less" scoped>.img-box{display: block;border-radius: 50%;overflow: hidden;img{width: 100%; height: 100%;}}
</style>

引用

import Avatar from "./components/Avatar.vue";
export default {components: {Avatar,  }
}