vue使用预览插件实现图片预览

1.安装依赖

cnpm install --save-picture-preview

2.在main.js中引入vue-picture-preview

import vuePicturePreview from 'vue-picture-preview'  //引入图片查看器

3.在main.js中调用

Vue.use(vuePicturePreview);

4.在根组件中放置

<lg-preview></lg-preview>

啰嗦几句，一定是根组件中！！！我一开始放错地方了，一直没法预览，一不小心进坑了！
我的项目根组件是App.vue，html代码如下

<template>
  <div id="app">
     <router-view></router-view>
     <lg-preview></lg-preview>
  </div>
</template>

配置完了，就可以在页面中正常使用了

<template>
    <div class="">
      <div>
        <el-row :span="24">
          <el-col :span="15">
            <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
              <el-tab-pane label="整改前" name="first">

              <!--  <div
                  class="img-box img-two"
                  v-if="listImg.length">
                  <div v-for="(item, index) in listImg" :key="index">
                    <img src="./2.jpg" alt="">
                    <img
                      :src="`{require(item)}`"
                      v-preview="item"
                      preview-title-enable="true"
                      preview-nav-enable="true"/>
                  </div>
                </div>-->
                <div class="img_box"  >
                  <p>图片查看器vue-picture-preview</p>
                  <ul>
                    <li  v-for="(img,index) in items" :key="index">
                      <img v-preview="img.img_url" :src="img.img_url"  :alt="img.title"
                           preview-title-enable="true"
                           preview-nav-enable="true" :style="{width:img_w}">
                      <p>{{img.title}}</p>
                    </li>
                  </ul>
                </div>
             </el-tab-pane>
              <el-tab-pane label="整改后" name="second">配置管理</el-tab-pane>
            </el-tabs>
          </el-col>
          <el-col :span="9">
            <div class="p-padding">
              <el-button type="primary" @click="handleVidioClick">实时视频</el-button>
              <el-button type="primary" @click="handleSaveClick">收藏</el-button>
              <el-button type="primary" @click="goBack">返回</el-button>
              <!--<span @click="handleSaveClick">
                  <svg class="icon-svg icon-svg__shoucang" style="width: 32px; height: 32px; vertical-align: middle;"><use xlink:href="#icon-shoucang"></use></svg>
              </span>
              <span @click="goBack()">
                  <svg  class="icon-svg icon-svg__fanhui" style="width: 32px; height: 32px; vertical-align: middle;"><use xlink:href="#icon-fanhui"></use></svg>
              </span>-->
            </div>

          </el-col>
        </el-row>

      </div>

    </div>
</template>

<script>
    export default {
        name: '',
        data () {
            return {
              img_w:((((window.screen.width)/33.333)*0.94)*0.5)+'rem',
              title:"图片查看器demo"  ,
              msg: 'Welcome to Your Vue.js App',
              activeName2: 'first',
              listImg:[

                './2.jpg'
              ],
              items:[
                {
                  title:"图片1",
                  img_url:require('../../assets/1.jpg')
                },
                {
                  title:"图片2",
                  img_url:require("../../assets/2.jpg")
                }
              ]
            }
        },
      created() {
        this.getRouterData()
      },
      methods: {
        handleSaveClick(){},
        goBack(){},
        handleVidioClick(){},
        getRouterData() {
          // 只是改了query，其他都不变
          this.page = this.$route.query.page
          this.code = this.$route.query.code
          console.log('page', this.page)
          console.log('code', this.code)
        },
        handleClick(tab, event) {
          console.log(tab, event);
        }

      }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  .img_box{
    width: 100%;
    overflow: auto
  }
  .img_box p:first-child{
    line-height: 2rem;
    font-size: 0.6rem;
    text-align: center;
  }
  .img_box ul{
    width: 100%;
  }
  .img_box li{
    list-style: none;
    margin-left: 2%;
    overflow: hidden;
    float: left;
  }
  li p{
    line-height: 1rem;
    font-size:0.5rem;
    text-align: center;
  }
</style>

参考链接