使用el-image標籤，發現預覽圖太大，佔滿了整個瀏覽器

程式碼如下：

<el-image :src="scope.row.carouselUrl" :preview-src-list="scope.row.photo"/>

如何才能控制預覽圖片的大小呢？如果我想不使用image元件又想使用預覽大圖的功能是否可行呢？我們可以使用image-viewer元件

使用方法：

1、引入image-viewer

import elImageViewer from 'element-ui/packages/image/src/image-viewer'

2、註冊元件

components: { elImageViewer },

3、使用元件

<el-table-column label="輪播圖" width="220px">
        <template slot-scope="scope">
          <img :src="scope.row.carouselUrl" width="200" height="100" class="tableImg"/>
          <el-button @click="onpreview(scope.row.carouselUrl)">預覽</el-button>
          <el-image-viewer
 

            v-if="showviewer"
            :on-close="closeviewer"
            :url-list="urlList"
            style="width: 80%; height: 80%; margin-left: 10%; margin-top: 5%"/>
        </template>
      </el-table-column>

注意：url-list為陣列，

4、在data資料模型中定義showviewer屬性和urlList陣列和在methods中定義方法closeviewer和onpreview方法

showviewer: false,
urlList: []

方法

// 關閉檢視器
closeviewer() {
  this.showviewer = false
  this.urlList = []
},
onpreview(url) {
  this.urlList.push(url)
  this.showviewer = true
},

當點選預覽按鈕，將圖片的url傳遞給onpreview方法，方法中將url放入urlList中。當關閉預覽圖時，將urlList清空，否則顯示的是原來的圖片。

效果如下：

點選預覽效果如下：