场景

数据库中存储照片的磁盘路径，需要鼠标在el-table的路径字段上悬浮时弹窗进行

图片网络URL的预览，所以需要在悬浮后对图片路径进行磁盘路径和网络URL映射路径

的转换。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

Popover弹出窗

其属性有

这里用到其触发的条件为悬浮

      <el-table-column label="照片路径" align="center" width="400" prop="photopath"><template slot-scope="scope"><el-popover placement="top-start" trigger="hover"><div style="width: 240px; height: 240px"><img:src="pcikerFormatter(scope.row.photopath)"altstyle="width: 100%; height: 100%"/></div><span slot="reference">{{ scope.row.photopath }}</span></el-popover></template></el-table-column>

所以这里在el-table-column中添加template

模板里是div,div里面是img标签，img的src图片路径属性是函数pickFormatter的返回值，并且获取图片路径作为函数的参数

在方法pcikerFormatter中

    pcikerFormatter(val) {if (val.match(/D:\\pic_old\\(\S*)/)) {let str = "http://网络ip:250/" + val.match(/D:\\pic_old\\(\S*)/)[1];console.log(str);return str;} else {return "";}},

这里是获取photopath这个字段的值为D:\\pic_old开头的磁盘路径，因为

在图片服务器上做了静态资源映射，所以直接可以将磁盘路径转换为网络URL

如果能直接获取图片的网络URL，就不用走这个格式化的方式，直接给img的src属性赋值即可。

Vue中使用el-popover实现悬浮弹窗显示图片预览相关推荐

简单的toast提示,确认弹窗,显示图片预览插件
JS /** * team777 dialog plugins * author eric * created 2016.1.21 **/ (function(win){'use strict';va ...
.md文件中插入本地图片并显示图片预览
文章目录前言一.图片文件上传到gitee图片仓库 1:获取图片网址 (1).注册gitee,建立gitee图片仓库 (2)上传图片至gitee图片仓库 2.修改图片网址,插入到md文件中并预览 ( ...
Vue+wangeditor富文本+element——--上传+下载文件+图片预览
一:上传文件 HTML <el-upload class="upload-demo" action="haircut/upload" :on-previe ...
vue中后端返回word文件下载地址，实现文件预览功能
土豪选择: 如果不缺钱可以直接使用第三方预览收费的: 这里推荐给大家: 网址:https://view.xdocin.com/ 使用起来也非常的简单,只需要做一个地址拼接就可以使用用法:(这里使用v ...
VUE图片预览放大缩小插件viewer
VUE图片预览放大缩小插件viewer 一.安装依赖 npm install v-viewer --save 二.main.js内引用并注册调用 //main.js import Viewer fro ...
vue图片缩略图及图片预览功能
前言上次有个需求,是要给图片做个缩略图以及预览功能.其实用vue来实现是很简单的, 几句代码可以搞定,也不需要什么额外的插件. 效果如下: vue显示图片缩略图 vue显示图片预览功能核心代码两 ...
vue中使用baidushare分享到微信无法显示bug解决方案
vue中使用baidushare分享到微信无法显示bug解决方案参考文章: (1)vue中使用baidushare分享到微信无法显示bug解决方案 (2)https://www.cnblogs.co ...
Vue中实现文件流格式图片预览
需求:后端接口返回文档流格式图片,如何在页面中显示显示并预览? 思路: 设置 axios responseType: 'blob':传送门:JavaScript Blob 对象详解 URL.creat ...
【VUE】图片预览放大缩小插件(推荐阅读)
From: https://www.jianshu.com/p/e3350aa1b0d0 在看项目时,突然看到预览图片的弹窗,感觉好僵硬,不能放大,不能切换,于是便在网上找下关于图片预览的插件,有找到 ...

Vue中使用el-popover实现悬浮弹窗显示图片预览

场景

实现

Vue中使用el-popover实现悬浮弹窗显示图片预览相关推荐

最新文章

热门文章