如何控制el-image預覽圖片的大小

使用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清空，否則顯示的是原來的圖片。

效果如下：

 點擊預覽效果如下：

 參考博客：http://www.10qianwan.com/articledetail/518684.html