如何从服务器获取图片并显示为缩略图且可以进行预览

原创于 2020-07-28 00:05:58 发布

· 1.5k 阅读

版权

文章标签：

本文介绍如何使用Vue.js结合ElementUI从服务器获取图片，并将其显示为缩略图，同时实现点击缩略图进行预览。通过上传图片功能，将后端返回的图片URL直接赋值给组件属性，实现图片展示和预览效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何从服务器获取图片并显示为缩略图且可以进行预览
注:对应该文章通过upload上传图片的文章地址: 通过upload上传图片

<el-image
        style="width: 100px; height: 40px"
        :src="srcOne"
        :preview-src-list="srcListOne">
</el-image>

使用elementui给的模板
src为缩略图
preview-src-list为点击缩略图后的预览图

srcOne: '',

srcListOne: [""],

data中设置好srcOne与srcListOne

let data = result.data.data;
this.srcOne = data.business_license_img;
this.srcListOne[0] = data.business_license_img;

从后端获取到的图片url直接赋值给srcOne和srcListOne[0]