VUE图片添加角标，图片右上角或左上角添加标识

在图片的右上角或左上角添加图片或文字

原理： 使用position: relative相对定位将角标（已发）定位到图片上
建议： 最外层的div添加overflow: hidden;属性，此可以在图片超出div时2进行隐藏
示例代码如下：

<template>
  <div class="demo-image">
    <el-image
        style="width: 100px; height: 100px; "
        :src="url">
    </el-image>
    <div class="published-div">
        <img src="../assets/rectangle.png" class="published-image"/>
        <span class="published-text">已发</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CornerMark',
  data() {
    return {
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    }
  }
}
</script>

<style scoped>
.demo-image {
    width: 100px; 
    height: 100px;
    overflow: hidden; 
    border-radius: 14px;
}
.published-div {
    position: relative;
    top: -108px;
    right: -42px;
}
.published-text {
    position: relative;
    top: -11px;
    width: 10px;
    right: 48px;
    font-size: 10px;
    margin-top: 0;
    color: white;
}
</style>