关于vue+element的图片显示功能(路径是从数据库获取的)
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
这是静态的
首先来看效果图
再来看代码
html部分
<el-popover placement="right" trigger="hover">
<img :src= url style="width: 500px;height: 400px">
<img slot="reference" :src=url style="width: 300px;height: 200px">
</el-popover>
这个代码包括了移入放大功能,我的博客里面也记录了相关信息,有疑惑的就去看看
我们再来看我是如何写的路径
url: '你的前缀' + '10177/5435d8a0-9888-11e9-a218-9ba9faf65ac7.jpg',
这两种方法不能实现
url: {uri: ('你的前缀' + '10177/5435d8a0-9888-11e9-a218-9ba9faf65ac7.jpg')},
url: {require: ('你的前缀' + '10177/5435d8a0-9888-11e9-a218-9ba9faf65ac7.jpg')},
给你们看看不能实现的截图
这是动态获取的
首先来看代码
html部分
<el-form-item label="手持身份证(营业执照)" prop="image_hand">
<el-popover placement="left" trigger="hover">
<img :src="baseUrl + form.image_hand" style="width: 500px;height: 400px">
<img slot="reference" :src="baseUrl + form.image_hand" style="width: 200px;height: 150px">
</el-popover>
</el-form-item>
data部分
data: '你的前缀'
具体是为什么我也不知道,如果有大佬知道,希望不吝赐教!
以上就是获取图片和视频的动态和静态的方法
(完)
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
5 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 5 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)