使用vue+element ui图片放大预览遮盖层异常

VIP文章 已于 2022-04-18 00:25:59 修改
阅读量4.2k 收藏 8
点赞数 2
文章标签： elementui
于 2022-04-18 00:23:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46083166/article/details/124239814
版权

使用element一个图片放大预览遮盖层只挡了一部分，如图
在这里插入图片描述
错误代码

			<el-image
                style="width: 100px; height: 100px"
                :src="'http://localhost:9090/file/'+scope.row.jlHeadurl"
                :preview-src-list="['http://localhost:9090/file/'
最低0.47元/天 解锁文章
zero_or_
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
基于vue + element UI 的后台管理系统模板
09-12
基于vue + element UI，实现登录页，系统主框架，动态路由的后台管理系统模板
Element-plus 图片预览，遮罩层显示问题
qq_53172341的博客
02-20 451
Element-plus 图片预览，遮罩层显示问题。
[Vue3+Element-Plus]点击列表中的图片预览时，图片被表格覆盖。
SqlloveSyn的博客
11-07 1902
点击列表中的图片进行预览时，图片被表格覆盖的解决方案。
前端图片放大（Element UI中的el-image，Element UI中的图片放大功能）
最新发布
weixin_65793170的博客
04-02 1572
Element UI 中，为了实现图片的大图预览功能，可以使用el-image组件配合el-image组件来完成。
（elementui-图片预览）el-dialog+el-image图片显示问题
ss_Tina的博客
10-31 4966
elementui图片预览。点击小图展示大图/点击预览按钮，弹框显示图片，点击图片预览大图。v-viewer预览&el-image预览！el-dialog+el-image图片预览问题修改。页面直接使用el-dialog和组件使用el-dialog。建议使用组件进行引入而不是直接将el-dialog写在页面中，可以修复一些显示性问题。
ElementUI v-for嵌套使用走马灯标签导致图片覆盖显示错误解决方法
weixin_44131922的博客
06-14 959
解决的总体思路 直接将包含走马灯的内容单独抽为一个页面VUE组件，独立出来，成为循环一层 例如 <ElCol :span="8" :key="index" v-else-if="item.lmType == '0'" style="padding:5px;"> <!-- 图片组件，被抽出来的单独页面 --> <picCard :item=item></picCard> </ElCol> 新页面 picCard中 <el-card :coll
vue3 + element-plus 使用Image 图片组件，点击图片预览功能。发现在table中，会出现预览的图片被遮罩。
技术前端，忠于热爱 @回忆哆啦没有A梦
05-30 7407
vue3 + element-plus 使用 Image 图片组件，点击图片预览功能。发现在table中，会出现预览的图片被遮罩。
【避坑指“难”】Element-ui中el-dialog组件显示时有蒙层（遮罩层）怎么破？
椰卤工程师的个人博客
07-06 3636
到底是什么问题？ 没错就是这样，就像上图一样，上传完图片需要预览时，图片被蒙层遮罩住了。 下面是整个组件的代码：图片上传、预览、删除，组件方法可以直接去Element-ui官方文档查看。 <template v-slot:img_upload> <el-upload action="#" list-type="picture-card" :limit="9" :auto
Element el-upload图片预览会有遮罩层盖住图片
A_sky_的博客
11-17 450
给 el-dialog 添加 :append-to-body="true" 属性。添加 :modal-append-to-body="false"如果取消预览之后 还是会出现遮罩层。这两种方式可以都试一下。
【vue3+element-plus】el-image点击图片预览时，被表格覆盖问题，加preview-teleported也不生效
m0_59699613的博客
11-14 1317
设置此属性，是将image-viewer 插入至 body 元素上。而运行项目点击预览图片，image-viewer 并没有插入至 body 元素上。搜集很久解决方案都是加：preview-teleported=‘true’，但我这个项目没有生效。最终问题解决，image-viewer 插入至 body 元素上。# 使用 yarn 的情况，安装最新版本。# 使用 npm 的情况，安装最新版本。
Vue + ElementPlus 图片预览遮罩层异常
luyoo452470的博客
10-08 585
vue element plus 图片预览遮罩层异常显示问题
Vue + Element UI图片上传控件使用详解
10-16
主要为大家详细介绍了Vue + Element UI图片上传控件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue+element-ui+axios实现图片上传
12-04
本文实例为大家分享了vue+element-ui+axios实现图片上传的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...
vue+echarts+element ui+django 前后端分离考勤系统源码.zip
05-08
vue+echarts+element ui+django 前后端分离考勤系统源码 vue+echarts+element ui+django 前后端分离考勤系统源码 vue+echarts+element ui+django 前后端分离考勤系统源码 vue+echarts+...
基于Vue+element UI 的手动创建地区json的三级联动
07-23
基于Vue+element ui+axios的三级联动，手动创建静态的json文件，axios获取json文件，并获取数据
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
10-17
主要介绍了VUE+Element UI实现简单的表格行内编辑效果的示例的代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue界面点击图片未显示当前活动页，被弹框遮挡问题
qq_42946963的博客
09-24 7184
界面图片被弹框遮挡 属性摄制 ????-index=99999
elementUi el-dialog多个嵌套弹出层被遮罩层遮住问题
qq_34587684的博客
07-11 1256
elementUi el-dialog多个嵌套弹出层被遮罩层遮住问题 第一个弹出是正常的，里面是el-upload点击缩略图查看大图， 点击查看大图发现弹出的大图弹出层被遮罩层遮住了，查看CSS发现是z-index问题解决办法，在el-upload里面的el-dialog增加 append-to-body完美解决...
Vue3+Element-plus的图片预览被表格覆盖的问题
weixin_43369256的博客
03-12 2966
<template #default="scope"> <el-image style="width: 100px; height: 100px" :src="scope.row.cover" :preview-src-list="[scope.row.cover]"> </el-image> </template> 出
使用vue+element UI编写一个前端基础框架
03-21
非常感谢您的提问。作为一个由 CSDN 开发的C知道 AI，我可以为您提供一些关于使用 Vue Element UI 编写前端基础框架的建议。 首先，您需要安装 Vue 和 Element UI。您可以通过以下命令来安装它们： ``` npm install vue npm install element-ui ``` 接下来，您可以创建一个 Vue 实例，并在其中引入 Element UI： ``` import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) new Vue({ el: '#app', render: h => h(App) }) ``` 在这个例子中，我们在 Vue 实例中引入了 Element UI，并将其注册为 Vue 的插件。我们还在 `index.html` 文件中创建了一个 `div` 元素，并将其 ID 设置为 `app`。这个 `div` 元素将会是我们的应用程序的根元素。 接下来，您可以创建一个基础框架的组件。例如，您可以创建一个名为 `MyLayout` 的组件，它将包含一个头部、一个侧边栏和一个主体区域： ``` <template> <div class="my-layout"> <header>Header</header> <aside>Sidebar</aside> <main>Main content</main> </div> </template> <style> .my-layout { display: flex; flex-direction: column; height: 100%; } header { height: 60px; background-color: #409EFF; color: #fff; display: flex; align-items: center; justify-content: center; } aside { width: 200px; background-color: #f0f0f0; } main { flex: 1; padding: 20px; } </style> ``` 在这个例子中，我们使用了 Flexbox 布局来创建一个包含头部、侧边栏和主体区域的布局。我们还使用了 Element UI 的样式来设置头部的背景颜色。 最后，您可以在您的应用程序中使用这个组件。例如，您可以在 `App.vue` 文件中引入 `MyLayout` 组件，并将其作为根组件： ``` <template> <div id="app"> <my-layout></my-layout> </div> </template> <script> import MyLayout from './MyLayout.vue' export default { components: { MyLayout } } </script> ``` 在这个例子中，我们在 `App.vue` 文件中引入了 `MyLayout` 组件，并将其注册为 `App` 组件的子组件。我们还在 `index.html` 文件中创建了一个 `div` 元素，并将其 ID 设置为 `app`。这个 `div` 元素将会是我们的应用程序的根元素。 希望这些建议能够帮助您开始使用 Vue Element UI 编写前端基础框架。如果您有任何其他问题，请随时问我。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值