el-image-viewer图片预览显示问题

最新推荐文章于 2024-09-24 15:26:07 发布
最新推荐文章于 2024-09-24 15:26:07 发布
阅读量1.3k 收藏 2
点赞数 1
文章标签： 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36110275/article/details/128568681
版权
文章讲述了在使用el-image-viewer组件进行图片预览时，如果在el-dialog弹框中会出现图片显示在弹框后面的问题。通过给el-image-viewer添加style属性`z-index:9999`，可以确保图片预览始终显示在最上方。
摘要由CSDN通过智能技术生成

el-image-viewer图片预览显示问题

问题描述

近期做了附件预览组件，若在弹框el-dialog中使用预览组件，预览图片会显示在弹框后面

问题解决

el-image-viewer增加样式style="z-index:9999"即可，这样保证显示在最上面。

<el-image-viewer
      v-if="imageShowView"
      :on-close="closeViewer"
      :url-list="viewImageList"
      style="z-index:9999"
    />
ZHicker
关注
element 点击button弹出图片 运用自带隐藏的图片查看器el-image-viewer浏览图片
架构师之路
12-10 564
所以网上找了下有个不错的方案，其实也是elementUI自带的功能，只是API文档里面没有罢了。看了下elementUI的文档，基本都是需要有缩略图的情况下，才能有放大的图。ElImageViewer是自带的组件，需要引入，然后在系统内注册成为组件。最近在开发一个图片预览效果，由于位置有限，没有原始的缩略图。
el-image-viewer 图片预览
weixin_47818125的博客
09-04 1198
点击某个按钮预览当前图片（直接引入element-ui路径的预览组件，会直接导致ie报不兼容ES6的错误，建议拷贝组件和里面的依赖代码 直接将element-ui的图片预览源码拷贝出来，然后引入到项目中，实现图片预览功能 <template> <div> <el-button @click="onPreview">预览</el-button> <el-image-viewer
element-ui点击预览按钮直接弹出有放大缩小预览效果的图片（el-image-viewer）
victorylip的博客
06-29 3842
element-ui预览组件使用
详解elementui之el-image-viewer(图片查看器)
11-30
前言 随着版本的更新Element UI新增了新的组件，例如：Image，没错今天被我发了Image下面可通过 previewSrcList 开启预览大图的功能。 这是官方文档中有写的，但是我想不使用Image组件又想使用预览大图的功能是否可行呢？ 答案是当然可以。 使用方法 翻看了Image的源码，发现大图预览是一个小组件image-viewer，打开看看它的props，如下 props: { urlList: { type: Array, default: () => [] }, zIndex: { type: Number, default:
大屏使用el-image组件全屏后图片预览时不显示
m0_70542915的博客
11-16 1191
但大屏中我们全屏的一般都是指定的标签，全屏之后这个标签就会覆盖body标签，自然就导致图片预览的图片被我们全屏的标签覆盖，解决办法就是去掉这个属性即可。另外大屏中因为很多地方都有图片预览功能，但并不是每个地方都用的el-image组件，也有点击按钮预览图片的，所以我单独使用了el-image-viewer组件，并把它放到要全屏的标签中。vue3+element-plus写大屏时遇到的一个问题，el-image组件添加了图片预览功能，但是大屏全屏之后点击预览的时候看不到图片，退出全屏后能正常显示。
实现图片预览遇到的一些问题（el-image-viewer）
weixin_48258311的博客
03-23 2454
实现图片预览遇到的一些小问题
el-image 大图预览总是不顺利?试试这个方法
bobringtheboys的博客
04-08 1916
不知道为什么我的项目中我点了大图所弹出的那个大图预览的div包含在了标签中,并没有全部展开,那我索性就直接控制它的弹框好了 需要注意的是 这个组件需要单独引入哈, 在引入element-ui的前提下 import ElImageViewer from 'element-ui/packages/image/src/image-viewer' export default { components: { ElImageViewer }, ..... <el-image-viewer
el-image打开预览弹窗第一张不显示问题
qq_43251098的博客
07-20 1472
今天本来想直接用引入element内部隐藏的el-image-viewer预览图片组件，在谷歌浏览器没有问题，但在ie浏览器中（10、11）页面加载不出来，于是还是打算采用api里面的el-image图片组件，但是当时没有太注意，直接把src删掉了，又或者src赋值的空值，导致el-image打开预览弹窗第一张不显示问题。 官方源码： <div class="demo-image__preview"> <el-image style="width: 100px; hei
基于element-puls的el-image-viewer组件实现移动端单指拖拽和双指缩放功能
06-29
二次封装的el-image-viewer组件，具有移动端双指缩放和单指拖拽功能。
element-plus中el-image-viewer图片预览功能
jieweiwujie的博客
09-24 154
elemenPlus没有直接提供图片预览功能，但是查看源码发现，已经封装好了组件el-image-viewer，我们可以直接使用，用法也很简单。使用的组件一定是全局引入的。如果是按需引入组件，需要从新在引入el-image-viewer。
el-image大图预览显示在父组件，无法全屏显示的问题
weixin_41138247的博客
08-28 6302
开发gis项目，通常会定制右侧容器组件，通过插槽插入子组件，各模块功能内容在右侧容器中展示。当通过el-image实现大图预览时，发现只能在容器组件中展示，查找原因，发现是：如果父元素的 transform, perspective 或 filter 属性不为 none 时，fixed 元素就会相对于父元素来进行定位的原因导致。如下图： 解决方案： 方法一：更改容器定位方式，不使用transform进行偏移。 方法二：若父容器不便于更改，只能考虑更改 el-image-viewe...
element-ui中el-image组件打开预览功能后，点击当前的图片，预览出来的不是当前，是切换后关闭之前的那一张
填了个大空℃
06-09 8348
el-image组件它是先渲染好浏览图片的div，当点击图片时直接把隐藏的div显示出来。当关闭时就直接隐藏div，下次点击又是直接显示div，并没有处理图片顺序。所以再次打开就是展示关闭前的图片。 //如果想每次点击都显示第一张。目前一个方法就是监听图片添加一个点击事件，对this.srcList重新赋值就可以了 mounted() { document.addEventListener('click', (e) => { if (e.target.classList.contains('el
Vue在使用el-image时显示加载失败问题
Coludidi的博客
07-10 1398
在element ui 组件上使用相对路径，webpack并不会对路径进行处理（即为根目录下的images）。图片地址用 require 进行拉取。
vue解决弹出图片显示在弹框下方
Nero的博客
08-04 2576
弹出的图片显示在弹框下面怎么办问题来源问题分析解决方法 问题来源 在写前端vue项目时，在用到ele的 el-image 这个组件时，有时会出现图片显示在弹框即dialog下面，后面发现是因为el-image组件，默认的z-index是2000。 后来我将这个z-index设置了一个较大的值，但是还会出现显示在弹框下面。 继续找问题，接着发现我是用的dialog打开了另外第2个dialog，在第2个dialog中打开el-image这个标签。 问题分析 通常会在dialog里加入append-to-bod
element-plus的el-image预览图片无法全屏
黄彪博客
06-18 1164
在开发中，使用 el-image 控件 查看图片详情，即放大图片，按照官方文档使用，结果发现图片详情无法全屏展示，如图。原因：el-carousel 滑动的效果就是利用了 CSS3 的。结论：查看图片详情是因为 CSS居中用的。备注： 代码和上面一样，只是将。图片无法在浏览器居中展示。
element el-image 大图预览顺序出错和加载失败问题
qq_37768929的博客
07-07 3894
element el-image 大图预览顺序出错 el-image使用方法 <div class="img" v-for="(item,i) in imageList" :key="i" > <el-image style="width:100%;height:100%" :src="item" :alt="item" :lazy="true" :preview-src-list="imageList" /> </div&
element-ui之el-image-viewer(图片查看器)及单击，双击事件冲突解决
roongyan92的博客
12-17 8718
有时候我们的需求和组件提供的不一致，就需要自己封装组件，有的功能实现起来很麻烦，产品要做一个双击图片打开预览的功能，原生js实现有点费劲。我们看一下Image的源码，发现大图预览是一个小组件image-viewer，打开看看它的props，如下 props: { urlList: { type: Array, default: () => [] }...
vue3 el-image大图预览显示在父组件,无法全屏显示的问题
大胆刁民的博客
05-07 1950
vue3 el-image无法全屏显示的问题 解决方案： 再el-image 里面加上 :preview-teleported=true <el-table-column fixed="left" label="图片地址" width="350"> <template #default="scope"> <el-carousel :interval="2000" arrow="always" height="230px">
el-image-viewer 预览图增加自定义内容
最新发布
09-30
`el-image-viewer` 是 Element UI 中的一个组件，它是一个图片查看器，主要用于放大和预览图片。如果你想要在预览图上增加自定义内容，Element UI 提供了一定的灵活性。 首先，你需要确保你在 `el-image-viewer` 的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值