项目场景：

有一个修改的页面，这个页面有个预览按钮。其实点击图片使用v-viewer已经实现了预览的功能了。现在做的是另一套方案，el-image中预览图片。

问题描述

当el-dialog+el-image是直接写在addOrupdate.vue中，发现预览图片过高过宽总是出现预览不全的效果，改的时候加滚动条显示滚动条也老是加的有问题，或去修改各种样式调试也总是有显示问题。要么宽>高的图片显示不正常，要么高>宽的显示不正常，没有同时显示好。

解决方案：

将el-dialog+el-image抽成一个组件后，addOrupdate.vue去引入这个组件，再去预览就不会有问题。图片太高了会有自动的滚动条去滑动。

组件代码：

<template><el-dialog  title="图片预览" :visible.sync="imgReview" :append-to-body="true"  width="50%"  ><el-image class="imgReview" :src="imgUrl" :fit="fit"  :preview-src-list="images" ></el-image><span slot="footer" class="dialog-footer"><el-button type="warning" @click="imgReview = false">取消</el-button><el-button type="primary" @click="imgReview = false" >确定</el-button></span></el-dialog>
</template><script>
export default {data() {return {fit: "fill",//scale-downimgUrl:'',images: [],imgReview:false,};},methods: {init() {this.imgReview = true;if( sessionStorage.getItem("imgUrl")){this.imgUrl = sessionStorage.getItem("imgUrl");this.images.push(sessionStorage.getItem("imgUrl"));}},},};
</script>
<style>
.imgReview{width: 60%;height: 80%;margin: 0 auto;display: flex;justify-content: center;align-items: center;
}
</style>

再记一个v-viewer点击小图预览大图

修改页面

 <el-form-item label="图片" prop="imgUrl" v-show="dataForm.imgUrl != ''"><!-- 达到预览大图的效果--><div v-viewer><img:src="dataForm.imgUrl"style="height: 70px; width: 70px; cursor: pointer;z-index:9999;"/></div>
</el-form-item>

显示列表中点击变大

页面

<el-table-column prop="imgUrl" label="图片" width="150"><template slot-scope="scope"><viewer><img:src="scope.row.imgUrl"style="height: 70px; width: 70px;cursor:pointer " ></viewer></template></el-table-column>

小结

开发过程中还是能使用组件就使用组件吧，以后不偷懒直接写在一个页面了。o(╥﹏╥)o

（elementui-图片预览）el-dialog+el-image图片显示问题相关推荐

html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器
原文:html5 图片上传,支持图片预览.压缩.及进度显示,兼容IE6+及标准浏览器以前写过上传组件,见打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一 ...
[css] 如何做图片预览，如何放大一个图片？
[css] 如何做图片预览,如何放大一个图片? 图片不跨域的话用 canvas 来 drawImage 放大裁剪也可以. 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷 ...
java图片预览上传_Java实现图片上传预览（使用ajax提交）
html: 图片上传: js: function changepic(){ var reads = new FileReader(); f = document.getElementById('fil ...
Vue+wangeditor富文本+element——--上传+下载文件+图片预览
一:上传文件 HTML <el-upload class="upload-demo" action="haircut/upload" :on-previe ...
【总结】手机图片预览插件photoswipe使用总结
手机图片预览photoswipe,支持pc图片预览,多用于android,ios的手机图片预览. 资源包:http://download.csdn.net/detail/snow_finland/81 ...
html photoswipe原理,手机图片预览插件photoswipe.js使用总结
手机图片预览photoswipe,支持pc图片预览,多用于android,ios的手机图片预览. 在photoswipe官网有1.0.11的包下载,但是1.0.11这个版本,存在缺陷,在部分andro ...
织梦后台图片预览功能跳到顶部怎么修改
织梦用来做网站还是比较顺手的存在,毕竟调用文章和修改模版都比较方便,不像帝国cms想修改一下模版太费神了,虽然dedecms很好用但是也有一些不尽人意的地方,毕竟现在都没人在维护了. 这段时间接了个仿 ...
图片预览（原生js实现）
功能描述很多网站都是使用浏览器自带图片浏览功能,但看起来很low,想手动实现图片预览功能,点击图片弹出大图预览框在屏幕中间显示,根据图片宽高自适应屏幕大小效果图具体代码实现页面preview. ...
chrome浏览器不能显示本地图片办法解决（图片预览）
近期开发项目时有个功能是实现图片预览,但是我将图片路径赋值给img标签的src时,预览的显示是这样的. 唉.我就郁闷了,再仔细一看,浏览器给我加了个路径啊. 这是什么鬼东西啊. 试了一下replace ...
适用于各浏览器支持图片预览，无刷新异步批量上传js插件(2)
之前写的这个上传插件,同事们都觉得还不错,不过都觉得还不够完美,于是决定使用业余时间对此插件持续优化,可能你过段时间会发现,插件又增加了新功能什么的,请注意文章后面评论里的更新说明. 以前在上传的时候 ...

（elementui-图片预览）el-dialog+el-image图片显示问题