<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><linkrel="stylesheet"href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><scriptsrc="https://unpkg.com/element-ui/lib/index.js"></script></head></head><body><divid='app'><el-row><el-col:span="2"><div>默认圆形</div><div><div><el-avatar:size="50":src="imgUrl"></el-avatar></div><divv-for="size in sizes":key="size"><el-avatar:size="size":src="imgUrl"></el-avatar></div></div></el-col><el-col:span="2"><div>方形</div><div><div><el-avatarshape="square":size="50":src="imgUrl"></el-avatar></div><divv-for="size in sizes":key="size"><el-avatarshape="square":size="size":src="imgUrl"></el-avatar></div></div></el-col><el-col:span='2'><div>
展示类型
</div><div><el-avataricon='el-icon-user-solid'></el-avatar></div><div><el-avatarsrc='https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'></el-avatar></div><div><el-avatar>user</el-avatar></div></el-col><el-col:span='2'><div>图片加载失败</div><div><el-avatar:size='100'src='https://empty'@error='errorHandler'><imgsrc='https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png'></el-avatar></div></el-col><el-col:span='2'><div>图片适应容器框</div><divv-for='fit in fits'><el-avatarshape='square':size='100':fit='fit':src='url'></el-avatar></div></el-col></el-row></div></body></html><script>newVue({el:'#app',data(){return{sizes:['large','medium','small'],imgUrl:"https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",fits:['fill','contain','cover','none','scale-down'],url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'}},methods:{errorHandler(){returntrue}}})</script>