Vue显示图片的几种方式小结

目录
  • 前言
  • 使用原生img标签
  • 使用ElementUI的Avatar
  • 总结

前言

最近在做自己的项目，有这么一个需求，用户列表需要展示用户的头像，之前一直没有处理，趁着这次机会，正好分享下我的解决过程。

头像这一栏空荡荡的，我这种强迫症患者难受死！

首先声明下，我的数据列表是查询数据库接口返回的，那么我头像路径也是保存在数据库的：

我先去网上随便搜了点图片入库里面，先让他能正常展示着，后面有空了再改为通过接口动态上传展示。

使用原生img标签

我们可以直接使用img标签去实现。通过它的src属性指定文件路径：

额。。。原生展示的图片好像有点太大了，我们简单给点样式吧：

这样是不是好多了！

相关代码：

 <el-table-column prop="image" label="头像" width="90"  align="center">
         <template slot-scope="scope">
　　　　    <img :src="scope.row.image" width="40" height="40" />
　　    </template>
      </el-table-column>

但是这种原生的方式虽然可以实现，但是如果想要修改一些东西，就显得有些复杂了，比如我想让头像显示圆形的。

这时候，可以借助三方提供的图片。

使用ElementUI的Avatar

AvatarElementUI提供的一个组件，它专门用来处图片，用图标、图片或者字符的形式展示用户或事物信息。

它使用起来也特别方便，基本可以说和img标签是一样的。

官方地址：ElementUI-Avatar 头像

里面提供了一些demo，以及使用说明和参数，我们根据自己的需求灵活选择即可。

经过挑选，我选择了一款，代码和效果如下：

可以看到，也是一样可以正常展示图片的。

这时候回到我刚才那个需求，我要让头像以圆形显示而不是方形，使用Avatar修改这个需求特别简单，这需要更换一个属性即可：

shape ：circle为原型头像
shape ：square为方形头像

刷新下页面再看下：

相关代码：

	!--
         shape 图片显示方式 circle为原型像 square为方形
         size 图片的大小
         src 图片的路径
        -->
      <el-table-column prop="image" label="头像" width="90"  align="center">
         <template slot-scope="scope">
             <el-avatar  shape="circle" :size="50" :src="scope.row.image"></el-avatar>
　　    </template>
      </el-table-column>

参数说明

关于它的参数，我只说一些简单的和必要的，其他参数详见官网

  • size 设置头像的大小
  • shape 设置头像的形状
  • src 图片头像的资源地址
  • fit 当展示类型为图片的时候，设置图片如何适应容器框

总结

其实还是很简单的，只需要搞清楚图片的url即可 。

到此这篇关于Vue显示图片的几种方式小结的文章就介绍到这了,更多相关Vue显示图片内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)

    vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)

    效果 若使用 请自行优化代码和样式 不显示图片/播放视频音频代码如下 <template> <div> <div v-on:dragover="tts" v-on:drop="ttrs" style="width: 800px;height: 200px;border: 1px solid black;font-size: 40px;line-height: 200px"> {{dt}} </div>

  • Vue实现鼠标悬浮隐藏与显示图片效果@mouseenter和@mouseleave事件详解

    Vue实现鼠标悬浮隐藏与显示图片效果@mouseenter和@mouseleave事件详解

    目录 前言 图片说明 功能实现 这里需要注意一点 mouseover 和 mouseenter 的区别 总结 前言 前端vue 有个功能是鼠标移动到指定item上显示出来一个编辑和删除的图标 鼠标悬停在列表那么需要有悬浮显示的列表编辑和删除icon 文字不好描述,因为是web端录屏也比较麻烦 这里用截图说明 图片说明 功能实现 之前没做过这种效果,问了一下我的组长-豪哥 他告诉我很简单,利用vue的@mouseenter 和 @mouseleave事件就可以完美解决 本着这个思路,我去寻求答案,

  • vue 鼠标移入移出(hover)切换显示图片问题

    目录 鼠标移入移出(hover)切换显示图片 css实现 js实现 vue鼠标移入移出事件注意事项 发生冒泡事件 一.解决方法 二.定义 三.两对鼠标事件的区别 鼠标移入移出(hover)切换显示图片 css实现 代码: <div @click="exitConnect()" class="exit_hover">        <img class="exit1 mr10" :src="exit" styl

  • Vue显示图片的几种方式小结

    目录 前言 使用原生img标签 使用ElementUI的Avatar 总结 前言 最近在做自己的项目,有这么一个需求,用户列表需要展示用户的头像,之前一直没有处理,趁着这次机会,正好分享下我的解决过程. 头像这一栏空荡荡的,我这种强迫症患者难受死! 首先声明下,我的数据列表是查询数据库接口返回的,那么我头像路径也是保存在数据库的: 我先去网上随便搜了点图片入库里面,先让他能正常展示着,后面有空了再改为通过接口动态上传展示. 使用原生img标签 我们可以直接使用img标签去实现.通过它的src属性

  • vue data引入本地图片的两种方式小结

    我就废话不多说了,大家直接看吧! 第一种 <template> <img :src="imgsrc"> </template> <script> export default { data () { return { imgsrc: require('../../images/ICON-electronicbilling.png') } } } </script> 第二种 <template> <img :s

  • 在Android TextView中显示图片的4种方式详解

    在Android TextView中显示图片的4种方式详解

    我们知道,TextView控件一般是用来显示文本的,而图片一般是用ImageView控件来显示. 那TextView能否显示图片呢?答案是肯定的!下面列出常见的4种方式. 1.XML文件中指定属性值 这种方式应该是最常用的了,在TextView的左上右下显示图片,可用  android:drawableLeft  android:drawableTop  android:drawableRight  android:drawableBottom 比如我们要在TextView的顶部设置图片,代码如

  • SpringMVC返回图片的几种方式(小结)

    后端提供服务,通常返回的json串,但是某些场景下可能需要直接返回二进制流,如一个图片编辑接口,希望直接将图片流返回给前端,此时可以怎么处理? I. 返回二进制图片 主要借助的是 HttpServletResponse这个对象,实现case如下 @RequestMapping(value = {"/img/render"}, method = {RequestMethod.GET, RequestMethod.POST, RequestMethod.OPTIONS}) @CrossOr

  • vue组件创建的三种方式小结

    1.使用Vue.extend创建全局的Vue组件 //1.1 使用vue.extend创建组件 var com1 = Vue.extend({ //通过template属性指定组件要展示的html结构 template : "<h3>使用vue.extend创建的组件</h3>" }) //1.2使用Vue.component('组件名称',创建出来的组件模板对象) Vue.component('myCom1',com1) 把名称以标签的形式放到页面中<m

  • python读取并显示图片的三种方法（opencv、matplotlib、PIL库）

    python读取并显示图片的三种方法（opencv、matplotlib、PIL库）

    前言 在进行图像处理时,经常会用到读取图片并显示出来这样的操作,所以本文总结了python中读取并显示图片的3种方式,分别基于opencv.matplotlib.PIL库实现,并给出了示例代码,介绍如下. OpenCV OpenCV是一个基于BSD许可(开源)发行的跨平台计算机视觉和机器学习软件库,可以运行在Linux.Windows.Android和Mac OS操作系统上. 它轻量级而且高效--由一系列 C 函数和少量 C++ 类构成,同时提供了Python.Ruby.MATLAB等语言的接口

  • Vue路由跳转的4种方式小结

    目录 1. 标签路由 router-link 2.编程式路由 this.$router.push() 3.this.$router.replace()(与this.$router.push()类似) 4.this.$router.go(n) 5.this.$router.push().this.$router.replace().this.$router.go(n)区别 router-view 实现路由内容的地方,引入组件时写到需要引入的地方,需要注意的是,使用vue-router控制路由则必须

  • vue监听路由变化的几种方式小结

    目录 监听路由变化的几种方式小结 一.监听路由从哪儿来到哪儿去 二.监听路由变化获取新老路由信息 三.监听路由变化触发方法 四.全局监听路由 如何在组件中监听路由参数的变化? 方式一: 监听 $route 方式二:通过组件内的导航守卫 监听路由变化的几种方式小结 vue页面开发中,我们经常需要根据路由的变化去实现一些操作,那么如何监听路由的变化呢?当然是利用VUE中的watch,请看代码. 一.监听路由从哪儿来到哪儿去 watch:{     $route(to,from){       con

  • Vue引入并使用Element组件库的两种方式小结

    目录 前言 Element-ui(饿了么ui) 安装element-ui 引入element-ui 完整引入element-u 按需引入element-ui 总结 前言 在开发的时候,虽然我们可以自己写css或者js甚至一些动画特效,但是也有很多开源的组件库帮我们写好了.我们只需要下载并引入即可. vue和element-ui在开发中是比较般配的,也是我们开发中用的很多的,下面就介绍下如何在eue项目中引入element-ui组件库 Element-ui(饿了么ui) element-ui(饿了

  • react 项目中引入图片的几种方式

    img标签引入图片 因为react其实是通过js的reader函数渲染的页面,所以直接写src="路径"是无法引入图片 我们可以像引入模块一样引入图片 import img from './../../../../asset/img/user.png' 需要用下面的方式引入 <img src={require('../images/picture.png')} alt="标签"/> 背景图片引入 1 第一种就是常规的 新建一个css文件,然后就可以直接写

随机推荐