头像等图片如何实现自定义图片相框
<image class="masked-image" :src="avatarImage"></image>
avatarImage为实际的正方形图片
添加背景图片相框
.masked-image {width: var(--image-width);height: var(--image-height);background-size: cover;background-position: center;mask-image:url("frameBlack.png");mask-size: contain;mask-repeat: no-repeat;mask-position: center;}
frameBlack.png如下
得到效果如下
