el-image标签绑定点击事件后没有有用

downloadByBlob(url, name) { const image = new Image() image.setAttribute('crossOrigin', 'anonymous') image.src = url image.onload = () => { const canvas = document.createElement('canvas') canvas.width = image.wid.

最近使用elementUI的el-image发现经常会出现加载src失败的情况，问题估计就是el-image的src路径一旦初始化加载失败的话就没有异步刷新，有两个解决办法： 1.给:src设置默认值，避免图片加载失败的情况 2.加v-if判断:src中的value值是否为空或者:src的key值是否存在，是则加载图片，否则不加载 ...

有时候我们的需求和组件提供的不一致，就需要自己封装组件，有的功能实现起来很麻烦，产品要做一个双击图片打开预览的功能，原生js实现有点费劲。我们看一下Image的源码，发现大图预览是一个小组件image-viewer，打开看看它的props，如下 props: { urlList: { type: Array, default: () => [] }...

今天遇到一个需求，运营人员反应，管理后台的点击预览图片后，要关闭时老是要去右上角找关闭按钮，觉得麻烦，问能不能直接点阴影区域就能关闭掉。一、找类似案例二、反思Elememt一个这么流行的基于Vue.js的UI框架，难道会这么粗暴的解决这种常见的需求吗三、解决果然，不出所料。

点击按钮显示el-image

对于这个需求，我们可以应对的方案是：在文字旁边写一个el-image图默认显示多张图片中的第一张，el-image的盒子根据文字的盒子定位position：absolute;left:0， 且el-image的宽高和文字的div宽高保持一致，相当于图片完全覆盖在文字上面，但el-image设置了透明度opacity:0，隐藏了图片。这样视觉效果上点击了文字，实际上点击了图片。preview-src-list对应的是图片列表，即多张图片访问链接的数组。

vue + element ui图片组件el-image的bug，点击图片导致页面不能滚动。按f12，我们在元素版面观察，发现在点击图片之后，body标签上多出了style="overflow: hidden;经过测试，发现两种解决办法。

el-image实现点击按钮预览大图 el-image el-image-viewer

【代码】点击按钮展示图片（ui组件el-image）

VUE+ELE图片预览组件

vue结合el-image实现点击按钮图片预览效果

v-html 添加 onclick 拦截事件 el-image-viewer大图预览