当src获取不到图片,onerror可指定一张默认的图片
<img src="img/789.png" onerror="javascript:this.src='img/123.png';" alt="pic" />
注意:当img/789.png图片不存在时,将触发 onerror,而 onerror 中又为 img 指定一个 img/123.png图片。也就是说图片存在则显示 img/789.png,图片不存在将显示img/123.png。但问题来了,如果 img/123.png也不存在,则继续触发 onerror,导致循环,故出现错误。
说明:如果图片存在,但网络很不通畅,也可能触发 onerror。
解决方法:
第一种::.去掉 onerror 代码;或者更改 onerror 代码为其它;或者确保 onerror 中的图片足够小,并且存在。
第二种:
(1):
<img src="img/123.png” onerror="nofind();" />
<script type="text/javascript">
function nofind(){
var img=event.srcElement;
img.src="http://www.cnblogs.com/sys/common/image/fileoperation/icon/default.gif";
img.onerror=null; 控制不要一直跳动
}
</script>
(2):
<img src="?" id="imgId" onerror="this.onerror=null;this.src='images/noavatar.png'">
<script>
document.getElementById("imgId").src = window.location.origin+"/api/uc/download_img/"+userData.userId;
</script>
当src获取不到图片,onerror可指定一张默认的图片的更多相关文章
- vue中图片返回404时,显示默认的图片
图片返回404时候的处理 <img :src="userMsg.portrait" ref="img" alt=""> _thi ...
- img标签中的图片加载异常时显示默认的图片
备忘:
- vue自定义指令,比onerror更优雅的方式实现当图片加载失败时使用默认图,提供三种方法
首先,来看下效果图(演示一下图片正常加载与加载失败时的效果) 在线体验地址:https://hxkj.vip/demo/vueImgOnerror/ 一.常规方法解决 我们都知道,img标签支持one ...
- 多个iframe中根据src获取特定iframe并执行操作
多个iframe中根据src获取特定iframe并执行操作 前言:在项目中做一个批量编辑工单时需要在一大堆的iframe中的某一个iframe里边再用模态框的形式显示编辑区域,然后再在模态框里边加入i ...
- 火车头dede采集接口,图片加水印,远程图片本地化,远程无后缀的无图片本地化
<?php /* [LocoySpider] (C)2005-2010 Lewell Inc. 火车采集器 DedeCMS 5.7 UTF8 文章发布接口 Update content: 图片加 ...
- 【js】【图片显示】js控制html页面显示图片方式
js控制html页面显示图片方式,只需要引入“jquery-1.11.2.min.js” js: /* 引用 <script src="jquery-1.11.2.min.js&quo ...
- java后台中处理图片辅助类汇总(上传图片到服务器,从服务器下载图片保存到本地,缩放图片,copy图片,往图片添加水印图片或者文字,生成二维码,删除图片等)
最近工作中处理小程序宝箱活动,需要java画海报,所以把这块都快百度遍了,记录一下处理的方法,百度博客上面也有不少坑! 获取本地图片路径: String bgPath = Thread.current ...
- 图片的另一种展现—将后台图片编码直接展现为图片
1.应用场景 开发过程中,遇到这样的需求:需要将服务器上的图片展现在页面上,但是图片所在服务器不是对外的,图片所在服务器与应用服务器也不在同一台机器上,这时候就需要在开发中先将图 ...
- js 压缩图片(只缩小体积,不更改图片尺寸)
1.情景展示 如上图所示,点击上传图片按钮,调用手机摄像头拍照功能. <input onchange="javascript:imgFun.uploadPicture();&quo ...
随机推荐
- Windows难民安装docker的注意事项
Windows下如何安装docker,这个没啥可说的,一直下一步就ok Windows docker 下载地址: https://download.docker.com/win/stable/Doc ...
- Shell系列(34) - 多分支case语句简介及实例
多分支case条件语句 概念 case语句和if...elif...else语句一样都是多分支条件语句,不过和if多分支条件语句不同的是,case语句只能判断一种条件关系,而if语句可以判断多种条件关 ...
- 关于web桌面应用的集成解决方案
背景 毫无疑问,面对一个新的项目需求,我们首先想到的就是web. 确实,web太方便了,基于浏览器对OS的适配,我们可以很快速的实现某个需求的页面UI,而无需考虑OS的兼容差异. 再经过jq.boot ...
- uni-app跨平台框架介绍和快速入门
前言: 首先今天主要介绍的是一个多平台的前端框架uni-app,关于多平台的前端框架网上有很多成熟的解决方案比如说Taro,React Native,Flutter等这些都是一些非常优秀的前端跨平台的 ...
- vue 熟悉项目结构 创建第一个自己的组件
* vue开发环境搭建 * 项目入口文件 ./src/main.js // The Vue build version to load with the `import` command // (ru ...
- centos 7 部署 zookeeper
Zookeeper集群搭建 由于公司缓存方案改进,准备采用codis集群作为主要的缓存解决方案(codis:国内豌豆荚开发的redis集群解决方案,已开源,github地址:https://githu ...
- Centos7.6安装python3.6.8
yum -y install bzip2-devel expat-devel gdbm-devel readline-devel sqlite-devel libffi-devel tk-devel ...
- CF235D-Graph Game【LCA,数学期望】
正题 题目链接:https://www.luogu.com.cn/problem/CF235D 题目大意 给出一棵基环树,每次随机选择一个点让权值加上这个点的连通块大小然后删掉这个点. 求删光所有点时 ...
- 你说要你想玩爬虫,但你说你不懂Python正则表达式,我信你个鬼,那你还不来看看?
前言 正则表达式是一个特殊的字符序列,它能帮助你方便的检查一个字符串是否与某种模式匹配. re 模块也提供了与这些方法功能完全一致的函数,这些函数使用一个模式字符串做为它们的第一个参数. re.mat ...
- Jmeter 压力测试学习8--断言
断言成功是不会显示的,失败会有提示. 登录断言 一.添加断言 登录->添加->断言->响应断言 二.执行,查看断言 登录配置的都是正确的用户名跟密码 如果响应断言中内容改为:&quo ...