el-popover查看示例图片

官网文档:element ui 用于vue2 和element plus 用于vue3
https://element.eleme.cn/#/zh-CN/component/popover
http://element-plus.org/zh-CN/component/popover.html

常见属性

<el-popover :width="400" trigger="hover" placement="right">
              <template #reference>
                <el-text class="ml30 mr10" type="primary" tag="ins">查看示例</el-text>
              </template>

              <el-image src="https://lvyou.xianguosuyuan.com/api/admin/sys-file/oss/file?fileName=9a63cf325865433ca9714d6929586cfb.png"></el-image>
            </el-popover>

未操作展示：

鼠标悬浮或点击后效果：显示图片和文字

如果查看示例需要满足条件才显示可加v-if判断条件，我这里是showPopover变量为true显示

<el-popover :width="400" trigger="hover" placement="right" v-if="showPopover">
              <template #reference>
                <el-text class="ml30 mr10" type="primary" tag="ins">查看示例</el-text>
              </template>

              <el-image src="https://lvyou.xianguosuyuan.com/api/admin/sys-file/oss/file?fileName=9a63cf325865433ca9714d6929586cfb.png"></el-image>
            </el-popover>