前端图片放大（Element UI中的el-image，Element UI中的图片放大功能）

Dear 丶 2024-04-22 22:30 12阅读 0赞

#### 简介：Element UI 中，为了实现图片的大图预览功能，可以使用 `el-image` 组件来完成。这里来简单记录一下 ####

#### 一、首先看下html部分 ####

<div class="eventImg_box" @click="choseEventImg(item)">
         <el-image
         :src="item.eventImagePath"
         :preview-src-list="imgList"
          class="event_img"
          >
          </el-image>
          <div class="big_img">点击图片放大</div>
    </div>

#### 二、定义需要使用的属性 ####

data() {
        return {
          imgList: [],
        };
    },

#### 三、事件函数 ####

choseEventImg(item) {
          this.imgList = [];
          this.imgList[0] = item.eventImagePath;
    },

#### 四、使用注意事项 ####

1.  事件触发时，记得首先要把数组清空，把imgList等于空数组，然后赋值。
2.  事件触发时，把img的路径，直接赋值给第一项，注意是imgList\[0\]，也就是preview-src-list绑定的数组元素imgList

####  ####

#### 五、样式在这 ####

.eventImg_box {
      position: relative;
      cursor: pointer;
      .event_img {
        width: 100%;
        height: 180px;
      }
      .big_img {
        color: white;
        display: none;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 10%;
      }
      &:hover {
        .big_img {
          display: block;
        }
      }
    }

下班~

发表评论取消回复

表情：

评论列表（有 0 条评论，12人围观）

还没有评论，来说两句吧...

相关阅读

相关前端图片放大（Element UI中的el-image，Element UI中的图片放大功能）

Element UI 中，为了实现图片的大图预览功能，可以使用el-image组件配合el-image组件来完成。

Dear 丶/ 2024年04月22日 22:30/ 0 赞/ 13 阅读

相关 element ui 图片删除

<el-upload action="/api/uploads" :file-list="addForm.files" list-type="picture-card"

左手的ㄟ右手/ 2022年10月25日 15:27/ 0 赞/ 116 阅读

相关图片的自动放大

图片的自动放大效果大概是今天早上10点钟的样子，我就接收到一个消息，需要进行图片的动态效果，给出的效果图如下： ![效果图][SouthEast]

朴灿烈づ我的快乐病毒、/ 2022年06月14日 06:44/ 0 赞/ 159 阅读

相关点击图片放大功能

点击图片放大功能注意：引入顺序必须先引入jquery.js再引入zoomify.js zoomify图片放大预览插件的github地址为： [https://

怼烎@/ 2022年04月17日 02:45/ 0 赞/ 361 阅读

相关 Element(2) 表格中实现图片的单击放大、悬浮放大、长按放大

一、实现效果如下图所示，打算实现一个在table表格中点击图片放大的效果【这里也可以是悬浮放大、长按放大等效果】 ![在这里插入图片描述][watermark_ty

痛定思痛。/ 2021年12月15日 14:59/ 1 赞/ 1459 阅读

相关图片放大效果

<style type="text/css"> {margin:0;padding:0;} /小图样式/ smallimg{

秒速五厘米/ 2021年10月08日 05:28/ 0 赞/ 492 阅读

相关图片居中放大

> 图片居中放大 1.外层一个固定宽高的div,背景图片，相对定位position：relative; 2.div里面包含一个img标签，初始宽高为0px；绝对定位

阳光穿透心脏的1/2处/ 2021年09月10日 08:12/ 0 赞/ 455 阅读

相关 css图片放大缩小

<!DOCTYPE html> <html> <head> <meta charset="utf-8">

淩亂°似流年/ 2021年09月02日 04:26/ 0 赞/ 494 阅读

相关 JS图片放大缩小

HTML部分代码 <img class="alert_img" onmousewheel="return suofang(this)" style="max-widt

我就是我/ 2021年08月29日 19:30/ 0 赞/ 542 阅读

相关 layui图片放大功能

刚刚的项目里面要做一个图片放大功能，用的layui，直接用layer.open改造了一个，记录一下！页面：

你的名字/ 2020年11月07日 19:00/ 0 赞/ 930 阅读