Vue 图片加载错误处理(显示默认图片)
在Vue H5项目中,图片加载错误,需要给图片一个默认的配图,如图:
如果不给默认图片的话会是这样,如图:
这样是不是很丑,哈哈哈哈!
那么我们应该怎么处理呢?
上码:
<img :src="图片地址变量" alt="" @error="imgError(图片地址变量)">
imgError(图片地址变量){图片地址变量 = require("默认图片地址")
},
还可以这样:
<img :src="图片地址变量" alt="" @error="imgError()">
imgError(){let img = event.srcElement;img.src = this.err_url;img.onerror = null; //防止闪图
},
希望看完的朋友可以点个喜欢/关注,您的支持是对我最大的鼓励。
如果喜欢本文的话,欢迎关注我的订阅号,漫漫技术路,期待未来共同学习成长。
Vue 图片加载错误处理(显示默认图片)相关推荐
- img 图片加载错误时显示默认图片
有时我们项目里的图片加载错误时(比如 404),为了友好体验,我们可以用一张默认图片来替代. 方法一:用 background 遮住原图片 <img src="no-such-pic. ...
- img图片加载错误时显示默认图片
JavaScript用的onerror事件,vue用的@error JavaScript写法 <img src="xxx" onerror="this.src='d ...
- 图片加载失败时,显示默认图片
当我们页面中需要加载一些图片时,可能由于网络问题,或者图片文件缺失等问题,导致图片不能正常展示 我们希望有一种降级处理的方式,可以在图片加载失败后显示一张我们预先设定好的默认图片 1.监听图片的 er ...
- 图片加载失败后显示默认图片
加载失败后显示默认图: <img :src="`${img}.png`" onerror="javascript:this.src='logo.png'" ...
- js中图片加载失败,显示默认图片
js处理img标签加载图片失败,显示默认图片 1.第一种方法: 如果已经引入了jquery插件,就很好办.没有的话,如果实在需要,可以附上代码: $('img').error(function(){$ ...
- ionic 图片加载失败,显示默认图片代替
1.首先编写自定义指令 angular.module('starter.directives', []) //当图片找不到事显示替代图片.directive("errSrc", f ...
- vue本地项目配置图片加载失败_vue图片加载失败时用默认图片替换的方法
vue图片加载失败时用默认图片替换的方法 前言 本文主要给大家介绍的关于vue实现图片加载失败时用默认图片替换的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 方法如下 原理 ...
- html中加载图片失败,图片加载失败如何用默认图片代替
背景:图片资源加载不出来时用默认图片替换 解决方法: 一,用js方法onerror: 1,直接在html标签中使用 复制代码 2,原生js方法: document.getElementById(' ...
- 图片加载失败时展示默认图片
HTML: <img src='${defalutImg}' data-src="${fileDomain }/images/${poi.firstPic}" width=& ...
- Glide4 加载失败时显示默认图片
// 根据URL的首字母创建一个DRAWABLE TextDrawable drawable = TextDrawable.builder().buildRoundRect(getUrlFirstLe ...
最新文章
- php日历如何写,如何写一个好看的实用的日历
- Python format 格式化函数
- 最小最大定理 java_Java基础50道经典练习题(35)——最大最小交换
- php缩图代码是什么,php生成缩略图示例代码分享(使用gd库实现)
- JAVA定义一个多边形类_如何在每个数据类别中绘制多个多边形?
- 将 gitblog 的博客内容搬迁到 CSDN
- java面向对象设计_Java面向对象设计
- 小程序入门学习13--云函数与数据库02
- 红标devcpp6.3编译器下载及配置教程
- Steam显示-118错误,页面无法显示
- C3: 基金名称末尾 A 和 C 的区别
- IOS捷径|九宫格切图工具 分享
- api.php(260x260),Restful Api文档 -V3-教程
- 利用python制作马赛克图
- Mars 开源月报(2020.3)
- 安装kubernetes dashboard时开发环境,运行gulp local-up-cluster任务一直显示wating for a heapster
- 开启多媒体台式计算机过程,东师多媒体计算机技术19秋在线作业2题目【标准答案】...
- Java后端开发工程师简历加分项:个人在线简历的搭建
- 【单片机仿真】(九)指令系统 — 算术运算指令 之 ADD、ADDC、SUBB、INC、DEC、DA
- 机器人运动估计——IMU运动方程与ESKF原理介绍(上)