图片右上角添加关闭效果

html:

<div class="img-box">

  <img :src="file.src" class="cover-img">
  <span class="image-remove" @click="removeImage(index)">+</span>                

</div>

css style:

.img-box{

  display: inline-block;  //设置inline-block使img填充div宽高，然后用+定位到右上角，block占据一整行，不能自适应内部元素宽高，inline使宽度自适应，但是无法设置宽高：宽高无效，+就无法定位到右上角

  border: 1px solid #ececec;
  position: relative;
}
.cover-img{
  max-width: 800px;//设置最大宽度，以免溢出：：：：不要设置百分比80%，否则div会是img的125%，导致+定位到右侧
  min-width: 200px;
}


.image-remove{
  background-color: white;
  font-color: #ececec;
  font-size: 30px;
  width: 30px;
  height: 30px;

  text-align: center;

  border-radius: 100%;
  transform: rotate(45deg); 
  cursor:pointer;
  opacity: 0.5;
  top:2px;
  right:2px;   //top、right: 距离上侧2个像素，距离右侧两个像素，也就是右上角
  display: block; //块元素:设置宽和高，inline元素设置宽高无效
  position: absolute; //绝对定位，关联父元素的relative

}

原理：

显示一张图片，图片右上角显示一个+，然后将+旋转45度，然后为+添加点击事件

使用一个div包含图片，然后根据绝对定位将+放置于div右上角

图片大小不一，就不能用定位将+置于右上角：除非强制设定图片宽高

div可以使用img填充宽高，然后+利用div定位

效果图如上，因为设置了min-width所以会有缩放，只是怕用户选中太小的图片，到时候叉叉比图片还大