使用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项目中,当图片无法显示时则显示默认图片的更多相关文章

  1. 如何Vue-cli开始使用在Vue.js项目中启动TDD（测试驱动开发）

    通常,使用测试驱动开发(TDD)最困难的部分是开始.你必须下载带有奇怪依赖项的软件包,让测试套件与你的构建系统协同工作,然后你必须弄清楚如何编写一个测试!难怪这么多的开发者在你提起它的时候就开始跑开了 ...

  2. Vue.js项目中使用iconfont冲突问题解决

    在开发前端项目中,字体图标变得越来越常用.一方面因为它比图片使用起来方便,可以像字体一样修改大小和颜色:另一方面是因为它可以减少请求数量,优化前端性能. iconfont的使用方法很简单,主要由三种引 ...

  3. 如何降低Vue.js项目中Webpack打包文件的大小？

    https://blog.csdn.net/maray/article/details/50988500?utm_source=blogxgwz0 import Blur from ‘vux/src/ ...

  4. Vue.js项目中使用 Ajax 和 FormDate 对象上传文件

    let param = new FormData(); param.append("paths", this.ruleForm.uploadPath); param.append( ...

  5. vue图片不存在时加载默认图片

    在文件中的img那里添加:οnerrοr="errorImg01",然后设置errorImg01的路径如果直接写成 errorImg01: ('../../assets/image ...

  6. visual studio 2019 中初始化 vue.js 项目

    vs项目模板,webpack模板的创建方式在vs里创建后,npm install的过程会卡很久,暂时原因不明,感觉应该是文件太多,需要写入太多零碎文件. 试了几种初始化方法,还是用最新cli创建最好, ...

  7. vue.js项目安装

    Vue.js 安装 NPM 方法安装vue.js项目 npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v 2.3.0 #升级 npm npm install np ...

  8. 如何把vue.js项目部署到服务器上

    如何把vue.js项目部署到服务器上面,我用的是tomcat服务器 1-改一下config/index.js文件,如下图,把assetsPublicPath: './', productionSour ...

  9. 在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理

    在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&am ...

随机推荐

  1. 【luogu P3953 逛公园】 题解

    题目链接:https://www.luogu.org/problemnew/show/P3953 题外话:感觉2017年神题好多..这还不是最神的一道,真在考场上我也就写个最短路计数暴力了.现在在大佬 ...

  2. HTML小记

    1.页面内跳转 当<a>元素用于页面内的锚点跳转时,应该先为该页面设置一些锚点,而定义锚点有两种办法: 通过<a>元素的name属性来定义,如:<a name=" ...

  3. Oracle DataGuard启动与关闭顺序

    (一)Active DataGuard启动顺序(1)启动监听,先启从库再起主库 lsnrctl start (2)启动数据库,先启动备库在启主库 --先启备库 sql>startup nomou ...

  4. Field userService in com.wuji.controller.UserController required a bean of type 'com.wuji.service.UserService' that could not be found

    Field userService in com.wuji.controller.UserController required a bean of type 'com.wuji.service.Us ...

  5. code#5 P1 报告

    报告   时间限制: 1.0 秒 空间限制: 128 MB 相关文件: 题目目录 题目描述 企鹅高中有很多学生,自然管理起来也就非常麻烦.学校的教务处想要随时统计学校里面有多少个学生,但是他们只有很多 ...

  6. JanusGraph 图数据库安装小记 ——以 JanusGraph 0.3.0 为例

    由于近期项目中有使用图数据的需求,经过对比,我们选择尝试使用 JanusGraph.本篇小记记录了我们安装 JanusGraph 以及需要一起集成的 Cassandra + Elasticsearch ...

  7. exynos4412—CMU裸板复习

    本章描述了Exynos 4412 SCP的时钟管理单元(CMUs).在Exynos 4412 SCP中,CMUs控制相位锁相环(PLLs),并为CPU.总线和单个ip的功能时钟生成系统时钟.它们还与电 ...

  8. golang channel 使用总结

    原文地址 不同于传统的多线程并发模型使用共享内存来实现线程间通信的方式,golang 的哲学是通过 channel 进行协程(goroutine)之间的通信来实现数据共享: Do not commun ...

  9. springcloud 笔记-服务注册中心

    1.搭建springcloud服务注册中心需要添加eureka的依赖: <?xml version="1.0" encoding="UTF-8"?> ...

  10. Docker学习笔记-Windows系统支持（一）

    Docker对windows的支持情况: 一.Docker for Windows ServerDocker Enterprise Edition for Windows Server 2016htt ...