使用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. ZXing 二维码应用

    1.导入zxing代码和包 2.下面的类是解析二维码的主要类. package com.gaint.nebula.interaction.ui.zxing; import java.io.IOExce ...

  2. Strategy（策略）模式

    1.概述 在软件开发中也常常遇到类似的情况,实现某一个功能有多种算法或者策略,我们可以根据环境或者条件的不同选择不同的算法或者策略来完成该功能.如查找.排序等,一种常用的方法是硬编码(Hard Cod ...

  3. Java byte数据转换和处理总结

    一.byte和int相互转换的方法 java程序或Android程序的socket数据传输,都是通过byte数组,但是int类型是4个byte组成的,如何把一个整形int转换成byte数组,同时如何把 ...

  4. 手机版的百度map封装,使用gps定位

    代码如下,包自己引 包参考 一个百度MAP导航的基础封装 使用的是浏览器调用gps定位 修改了标注的大小 效果如图: 代码...... <!DOCTYPE html> <html&g ...

  5. async函数结合promise的小案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. js中改变this指向的call、apply、bind 方法使用

    前言: 由于js 中this的指向受函数运行环境的影响,指向经常改变,使得开发变得困难和模糊,所以在封装sdk,写一些复杂函数的时候经常会用到this 指向绑定,以避免出现不必要的问题,call.ap ...

  7. grub启动引导程序配置及命令行接口详解

    Grub(GRand Unified Bootloader),统一资源引导器,它的工作是提供一个菜单,允许用户选择要启动的系统或不同的内核版本:把用户选定的内核装载到RAM中的特定空间中,然后解压.展 ...

  8. java8时间工具类Localdate、LocaldateTime

    优点: 1.方便. Date 只能是日期加时间的格式,而 LocalDate .LocalTime.LocalDateTime 分别代表日期,时间,日期+时间,非常灵活.再就是后者在日期计算及格式化方 ...

  9. Angular4 扫雷小游戏

    扫雷小游戏,可以升级过关,难度随关卡增加.但是有很明显的bug,以后有时间会继续优化! HTML: <div class="mainContent"> <div ...

  10. php设置文件类型content-type

    在PHP中可以通过header函数来发送头信息,还可以设置文件的content-type,下面整理了一些常见文件类型对于的content-type值. //date 2015-06-22//定义编码h ...