vue图片预览

el-image可以直接使用preview-src-list

<el-image
              style="height: 40px"
              :src=" baseUrl + row.imageUrl"
              :preview-src-list="[baseUrl + row.imageUrl]"
            ></el-image>

注意preview-src-list是个数组类型的

el-upload标签可以使用:on-preview="handlePictureCardPreview"

<el-upload							
	accept=".gif,.jpeg,.jpg,.png,.pdf,.doc,.docx,.xlsx,.xls"
	action=""
	:limit="9"
	ref="uplad"
	:on-exceed="handleExceed"
	:http-request="uploadFile"
	list-type="picture-card"
	:before-remove="beforeRemove"
	:on-remove="handlehyRemove"
	:on-preview="handlePictureCardPreview"
>
	<i class="el-icon-plus"></i>
</el-upload>

<el-dialog :visible.sync="imgDialog">
	<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>

// 图片预览
		handlePictureCardPreview(file) {
			this.dialogImageUrl = file.url;
			this.imgDialog = true;
		},

当然，第二种方法同样适用于img标签