vue点击按钮弹窗显示图片

        需求是根据当前表格的行数据来获取对应的图片。然后我的行数据里已经有了id值，图片的名称也是id值。所以先通过按钮点击获取对应行的数据。这是写在表格里的按钮。

<template slot-scope="scope">
    <!-- scope.row可以拿到对应行的数据 -->
    <el-button
    type="primary" 
    icon="el-icon-search"
    @click="dialogVisible = true"
    @click.native.prevent="getrows(scope.row)"
    >
    查看
    </el-button>
</template>

         然后写弹窗，注意el-dialog不能写在template里面，不然会根据数据生成多个弹窗，一旦图片较长的时候，通过滑动条查看图片的时候会显示低层的弹窗，就会出现多出来的部分。

        这里我的src是自己图片的位置，图片按照1,2,3这样子的顺序来命名

 

<el-dialog
    title="帧图"
    :visible.sync="dialogVisible"
    :modal="false"
    append-to-body
    :width="dialogWidth"> 
    <!-- :modal="false"去掉遮蔽层 -->
    <!-- :width绑定宽度，来适应图片的宽度 -->
    <!-- 通过load事件来获取图片宽度，使得容器宽度适应图片 -->
    <!-- src里注意require里面用模板字符串 -->
    <el-image :src="require(`../../assets/${index}.jpg`)" 
    @load="onLoadImg" :width="boxWidth">
    </el-image>
    <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
</el-dialog>

        然后在data里加入数据 ，这里仅展示有关数据，我的表格数据里是包含id值的。

export default {
    data(){
        return{
            index:1,    //默认设为1，因为我的图片没有0.jpg，所以如果设置为0为报错
            dialogWidth: "",    //弹窗宽度，可根据图片宽度进行改变
            boxWidth: "",    //图片宽度
            //其他数据里包含id值，这个可以自己根据数据来调整
        }
    },
    methods:{
        // 通过图片宽度来改变容器宽度，做到自适应，但是有待改善的地方。如果图片大小不一样.
        //不刷新页面的情况下，点击了宽度较小的图片后再点击宽度较大的图片，宽度会按照小的图片的宽度来显示。
        onLoadImg: function (e) {
            var img = e.target;
            var width = 0;
            if (img.fileSize > 0 || (img.width > 1 && img.height > 1)) {
                width = img.width;
            }
            // if ((img.height > img.width) &&  width > 370) {
            //     width = 370
            // } else if (width > 600) {
            //     width = 600
            // }
            this.boxWidth= width + 'px';
            this.dialogWidth = width + 40 + 'px';
        },
        //获取id值，并且将其赋值给index，从而获取对应的图片名字
        getrows(row){
            console.log(row.id)
            this.index=row.id
        }，
    }
}

表格里左边显示图片帧号，帧号即id值，右边是可以点击显示帧图 

点击查看，横向的图片显示

竖线的图片显示

由于高度是自适应的，所以有些图片可能较长超出页面，需要拖动。

小图片显示：