Element el-upload图片预览会有遮罩层盖住图片

最新推荐文章于 2024-05-24 15:50:40 发布
最新推荐文章于 2024-05-24 15:50:40 发布
阅读量638 收藏
点赞数 3
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A_sky_/article/details/134466839
版权
文章讲述了在Vue中使用el-dialog组件时，如何解决图片显示发白且预览后仍有遮罩层的问题，提出通过设置`modal-append-to-body`和`append-to-body`属性来调整对话框行为。
摘要由CSDN通过智能技术生成

效果图（图片有点发白，显示是灰色）：

代码：

      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>

解决：

给 el-dialog 添加 :modal-append-to-body="false" 属性

如果取消预览之后 还是会出现遮罩层

给 el-dialog 添加 :append-to-body="true" 属性

这两种方式可以都试一下

      <el-dialog :visible.sync="dialogVisible" :modal="false">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>

Ranni_l
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
10-18
今天小编就为大家分享一篇vue2.0 使用element-ui里的upload组件实现图片预览效果方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element-ui中的dialog去掉遮罩层
Codernmx
01-21 7691
element ui是基于vue的一套前端可视化组件库，官方文档给出的dialog下的modal属性是一个布尔值，需要使用v-bind指令进行监听，在前面加个“：”就可以去掉遮罩层。 :modal='false'
解决el-image只能点击关闭按钮才能关闭的问题
最新发布
weixin_42332641的博客
05-24 326
问题：el-image打开大图预览时，只能点击关闭按钮才能关闭，点击蒙层不能关闭的。
elementUi el-dialog多个嵌套弹出层被遮罩层遮住问题
qq_34587684的博客
07-11 1301
elementUi el-dialog多个嵌套弹出层被遮罩层遮住问题 第一个弹出是正常的，里面是el-upload点击缩略图查看大图， 点击查看大图发现弹出的大图弹出层被遮罩层遮住了，查看CSS发现是z-index问题解决办法，在el-upload里面的el-dialog增加 append-to-body完美解决...
上传头像，鼠标放上去 遮罩效果 el-upload
weixin_45799001的博客
06-21 870
css
Vue-element上传图片el-upload组件改造（可放大和删除蒙版、限制格式大小）
qq_15066133的博客
02-27 339
Vue-element上传图片el-upload组件改造（可放大和删除蒙版、限制格式大小）_vue,el-upload,放大预览-CSDN博客
动态上传文件遮罩层
07-18
带图片的动态上传文件，js插件，带遮罩层
【避坑指“难”】Element-ui中el-dialog组件显示时有蒙层（遮罩层）怎么破？
椰卤工程师的个人博客
07-06 3825
到底是什么问题？ 没错就是这样，就像上图一样，上传完图片需要预览时，图片被蒙层遮罩住了。 下面是整个组件的代码：图片上传、预览、删除，组件方法可以直接去Element-ui官方文档查看。 <template v-slot:img_upload> <el-upload action="#" list-type="picture-card" :limit="9" :auto
Vue3 + Element-Plus 使用 Table 预览图片发生元素遮挡
一名全栈小白的博客
04-16 942
Vue3 + Element-Plus 使用 Table 预览图片发生元素遮挡
el-dialog覆盖图片预览
qq_50452445的博客
11-07 563
经过排查发现，el-dialog每次打开时。它的z-index值都会自加3。发现问题：当多次点击弹出框后图片会被覆盖。功能描述：在弹出框中实现图片预览功能。预览图片，只需要进行简单配置即可。由于我司预览图片是使用。
Element-ui 图片预览滚动时候，禁止遮罩层后面的内容滚动
shadow_yi_0416的博客
12-01 2380
需求一：不通过点击图片进行预览，通过点击按钮预览图片。且当前页面没有图片 html代码：按钮 <el-button @click="showImg"> 点击按钮预览图片</el-button> html代码：图片 图片的代码由于element-ui的图片预览组件，要求，图片的属性不能是display：none，且透明度不能为0； 因此，我想其实可以设置一个宽度近乎没有值。 <el-image ref="preview" style="wid
基于element-ui 使用 upload 预览图片 （含删除功能）
08-23
基于element-ui 使用 upload 预览图片 （含删除功能）参考链接：https://blog.csdn.net/qq_36437172/article/details/100034867
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
10-14
在本文中，我们将深入探讨如何在Vue.js项目中结合Element UI的`el-upload`组件实现图片的压缩功能，特别是在用户上传大尺寸图片时，确保前端能够处理并优化图片大小，减轻服务器负担。以下是一步步实现这个功能的...
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
以上就是关于vue-cli3.0+element-ui上传组件el-upload的使用介绍。通过自定义这些属性和钩子函数，我们可以灵活地控制文件上传的过程，满足各种业务场景的需求。在实际开发中，还可以结合axios等HTTP库进行更复杂的...
element ui 弹出组件的遮罩层在弹出层的上面的解决方法:modal-append-to-body="false"
热门推荐
webZRH的博客
08-14 2万+
<el-dialog :visible.sync="dialogImg" :modal-append-to-body="false"> <img :src="dialogImageUrl" alt=""> </el-dialog> 运用element的Upload 上传组件预览图片会出现遮罩层在弹出层的上面在遮罩处添加:modal-append-to-bo...
使用vue+element ui图片放大预览遮盖层异常
weixin_46083166的博客
04-18 4309
使用element一个图片放大预览遮盖层只挡了一部分，如图 错误代码 <el-image style="width: 100px; height: 100px" :src="'http://localhost:9090/file/'+scope.row.jlHeadurl" :preview-src-list="['http://localhost:9090/file/'+scope.row.jlH
vue3+element-plus预览图片被表格遮挡，更换版本plus版本size失效报错（custom validator check failed for prop “size“.）
dargon_hungry的博客
06-02 1762
vue3+element-plus预览图片被表格遮挡，更换版本plus版本size失效报错（custom validator check failed for prop "size".）
【elementplus】el-image图片预览的显示不全问题（和el-table、el-dialog组合使用时）
记录
03-07 1365
在和el-table、el-dialog组合使用时，el-image图片预览的时候，会可能出现显示不全图片的情况。
element plus 的一个高版本bug：预览图片被表格覆盖问题解决
Brave_heart4pzj的博客
06-23 984
VUE+Element Plus
element ui el-upload文件预览
04-18
Element UI的el-upload组件可以用于文件上传，并且支持文件预览功能。在使用el-upload组件时，你可以通过设置属性来启用文件预览功能。 首先，确保你已经正确引入了Element UI库和el-upload组件。然后，在你的代码中使用el-upload组件，并设置以下属性： 1. 设置`action`属性为文件上传的接口地址。 2. 设置`show-file-list`属性为`false`，以隐藏默认的文件列表展示。 3. 设置`on-success`属性为一个回调函数，用于处理文件上传成功后的逻辑。 4. 设置`before-upload`属性为一个回调函数，用于在文件上传之前进行一些操作，比如文件预览。 5. 在`before-upload`回调函数中，可以通过`file`参数获取到当前上传的文件对象。你可以使用`FileReader`对象来读取文件内容，并将其显示在页面上。 下面是一个示例代码： ```html <template> <el-upload class="upload-demo" action="/your-upload-api" :show-file-list="false" :before-upload="handleBeforeUpload" :on-success="handleSuccess" > <el-button size="small" type="primary">点击上传</el-button> </el-upload> </template> <script> export default { methods: { handleBeforeUpload(file) { // 使用FileReader读取文件内容并显示预览 const reader = new FileReader(); reader.onload = (e) => { // 在页面上显示文件预览 const preview = document.createElement('img'); preview.src = e.target.result; document.body.appendChild(preview); }; reader.readAsDataURL(file); // 返回false以阻止文件上传 return false; }, handleSuccess(response) { // 文件上传成功后的处理逻辑 console.log('文件上传成功', response); }, }, }; </script> ``` 这样，当用户选择文件后，会触发`before-upload`回调函数，你可以在该函数中读取文件内容并显示预览。然后，文件会被阻止上传，直到你处理完预览逻辑后再手动触发文件上传。 希望以上信息对你有帮助！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值