Vue.js项目中,当图片无法显示时则显示默认图片
使用require将图片进入,写法如下:
data: () => ({logo: 'this.src="' + require('../assets/img.png') + '"'})
注:我是在data里就将字符串拼接好了,当然也可以在onerror方法里拼接,这里就不赘述了。
然后在img的onerror方法中调用
<img v-bind:src="userData.photo" :onerror="logo" class="img-box4">
在v-bind标签中,单引号' '引用的内容作为字符串存在;双引号" "引用的内容作为变量/表达式存在,可以进行运算。
Vue.js项目中,当图片无法显示时则显示默认图片的更多相关文章
- 如何Vue-cli开始使用在Vue.js项目中启动TDD(测试驱动开发)
通常,使用测试驱动开发(TDD)最困难的部分是开始.你必须下载带有奇怪依赖项的软件包,让测试套件与你的构建系统协同工作,然后你必须弄清楚如何编写一个测试!难怪这么多的开发者在你提起它的时候就开始跑开了 ...
- Vue.js项目中使用iconfont冲突问题解决
在开发前端项目中,字体图标变得越来越常用.一方面因为它比图片使用起来方便,可以像字体一样修改大小和颜色:另一方面是因为它可以减少请求数量,优化前端性能. iconfont的使用方法很简单,主要由三种引 ...
- 如何降低Vue.js项目中Webpack打包文件的大小?
https://blog.csdn.net/maray/article/details/50988500?utm_source=blogxgwz0 import Blur from ‘vux/src/ ...
- Vue.js项目中使用 Ajax 和 FormDate 对象上传文件
let param = new FormData(); param.append("paths", this.ruleForm.uploadPath); param.append( ...
- vue图片不存在时加载默认图片
在文件中的img那里添加:οnerrοr="errorImg01",然后设置errorImg01的路径如果直接写成 errorImg01: ('../../assets/image ...
- visual studio 2019 中初始化 vue.js 项目
vs项目模板,webpack模板的创建方式在vs里创建后,npm install的过程会卡很久,暂时原因不明,感觉应该是文件太多,需要写入太多零碎文件. 试了几种初始化方法,还是用最新cli创建最好, ...
- vue.js项目安装
Vue.js 安装 NPM 方法安装vue.js项目 npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v 2.3.0 #升级 npm npm install np ...
- 如何把vue.js项目部署到服务器上
如何把vue.js项目部署到服务器上面,我用的是tomcat服务器 1-改一下config/index.js文件,如下图,把assetsPublicPath: './', productionSour ...
- 在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理
在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&am ...
随机推荐
- 404 Note Found队 Alpha7
目录 组员情况 组员1(组长):胡绪佩 组员2:胡青元 组员3:庄卉 组员4:家灿 组员5:凯琳 组员6:翟丹丹 组员7:何家伟 组员8:政演 组员9:黄鸿杰 组员10:刘一好 组员11:何宇恒 展示 ...
- 日志采集框架Flume
前言 在一个完整的大数据处理系统中,除了hdfs+mapreduce+hive组成分析系统的核心之外,还需要数据采集.结果数据导出.任务调度等不可或缺的辅助系统,而这些辅助工具在hadoop生态体系中 ...
- 使用Docker发布.NET CORE API
1.使用VS 2015 新建了一个Core API项目,然后把他的依赖升级到最新(我机器VS 2015默认的包都是rc版本),然后publish. 2.在publish目录的同级目录下,新建Docke ...
- Excel工作表保护的密码破解与清除...假装自己破解密码系列?
有一次我女朋友让我帮忙解一个excel表格的保护密码,然后~用了宏 网上下载来的Excel经常会有工作表保护,也就是无法修改,妄图做任何修改的时候你就会看见这句话: 您试图更改的单元格或图表位于受保护 ...
- linux静态IP最简配置
vi /etc/sysconfig/network-scripts/ifcfg-xxx TYPE="Ethernet"BOOTPROTO="static"ONB ...
- MongoDB基础教程
MongoDB 一.下载MongoDB数据库 1.进入MongoDB官网进行下载,网址:https://www.mongodb.com/. 2.下载完成后可进行安装,安装后,并有了MongoDB服务. ...
- laravel artisan 命令列表
5.4版本新增 命令 说明 备注 php artisan make:resource ? 创建api返回格式化资源 >=5.4版本可用 php artisan make:rule ? 创建val ...
- jdbc之连接Oracle的基本步骤
// 1.加载驱动程序 Class.forName("oracle.jdbc.driver.OracleDriver"); // 2.获取数据库连接 Connection conn ...
- 树莓派3B+SimpleCV上连接iPhone4s摄像头
目的:把iPhone4s当成网络摄像头,通过wifi连接到树莓派上,做为树莓派的摄像头. 1. iPhone4s上安装mini WebCam应用. 很旧的一个app, 没有密码,简单,无广告,免费. ...
- C语言下的错误处理问题
今天来分享我认为比较好的几种在C语言下的错误处理方式 方式一: int example(int num) { ) { ; } ; } 在不符合条件的情况下使用return终止程序 方式二: void ...