vue图片放大显示(1)

77 阅读1分钟

动态绑定图片路径:

 <el-form-item label="员工人像:" >
          <el-image
            style="width: 100px; height: 100px"
            :src="src"
            :preview-src-list="srcList"
          >
          </el-image>
 </el-form-item>

data(){
	return {
		src: "", 
                srcList: [],
	}
}

在上传人像成功的方法内获取图片路径
方法内调接口:
upLoad(formData).then((res) => {
        //查看区域显示图片
        this.src = res.picUrl;
        this.srcList.push(res.picUrl);
})

效果图:点击图片,在屏幕中间放大

![在这里插入图片描述](https://img-blog.csdnimg.cn/7bc8fafa43e24269bebf762b9eff5c73.png