vue+element ui设置默认头像

<el-form-item prop="avatar" label="头像" :label-width="dialogFormLabelWidth"><el-uploadname="file"class="avatar-uploader":action="uploadImgUrl":show-file-list="false":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload"accept=".jpg,.png,.tiff,.jpeg":headers="headers"><img v-if="dialogForm.avatar" :src="dialogForm.avatar" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload>
</el-form-item>

变量avatar：

赋默认路径：（用户不上传头像，直接读取项目中的相对路径图片）

avatar:require("../../../../front-template/statics/test/default/images/defalte.jpg"),

注：img标签的src属性后面不能放变量，放变量只能用：src=...

但是如果只是单纯给一个变量赋值相对路径的话图片仍然无法读取

像这样：

avatar:"../../../../front-template/statics/test/default/images/defalte.jpg",

这时候只要给这个相对路径处理一下如上面加上require（"相对路径"）

:src就起作用了

vue+element ui设置默认头像相关推荐

vue+element ui 设置页面全屏全屏和退出全屏的切换
vue+element ui 设置页面全屏全屏和退出全屏的切换方式1 screenfull 插件 // 属性 screenfull.isFullscreen; // 判断当前页是否全屏返回类型 ...
Element ui 设置默认时间显示
element ui 选择时间组件: 需求:实现默认时间定位于当前时间延后7天的日期:且当前时间之前的日期不能选: html部分: <el-date-pickerv-model="sh ...
Vue+Element ui el-date-picker默认当前年月日时分秒并且可再次选择
el-date-picker 通常都是时间选择器获取焦点的时候获取当前时间,现在的需求是表单进入时间框默认当前年月日分秒,并且可以再次获取选中时间. 下面是我的解决办法,希望可以帮到你们! 1.首先要 ...
Vue element el-select 设置默认选中
<el-form-item label="状态:"><el-select v-model="MissionTemplateForm.state" ...
Vue+Element UI 下，如何给一个表单设置自定义规则或多个验证规则（：rules）
依旧是公司里那个Vue+Element UI的项目.今天遇到了一个新的问题:表单中某个选择器的值不同,控制着下面表单内容是否显示. 大概就是这个样子.由后台返回的"发放方式"的数值 ...
【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
nodeJs + webpack+vue+ element ui 环境安装
一.安装nodeJs 1.打开NodeJs官网:https://nodejs.org/en/download/ 点击下载 2.双击安装,安装过程基本直接"NEXT"就可以了.(w ...

vue+element ui设置默认头像

vue+element ui设置默认头像相关推荐

最新文章

热门文章