当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 ...
随机推荐
- R和Rstudio的安装
首先是安装R再安装Rstudio 链接放在这里: R语言软件以及Rstudio软件下载:链接:https://pan.baidu.com/s/11TH4mJjoi3QXGfamB697rw 密码:o1 ...
- PHP中的对象比较
在之前的文章中,我们讲过PHP中比较数组的时候发生了什么?.这次,我们来讲讲在对象比较的时候PHP是怎样进行比较的. 首先,我们先根据PHP文档来定义对象比较的方式: 同一个类的实例,比较属性大小,根 ...
- vue注意点
template下面只能有一个节点,不能是多个
- php stream 流封装协议
http://php.net/manual/wrappers.php 过程: 1. 开始通信 2. 读取数据 3. 写入数据 4. 结束通信 usage: * 读写文件系统 <?php $han ...
- python全局变量的定义
第一:如定义在类或者函数体外,在函数或者类中引用需要用到 global声明 temp_t = "ceshi" def tmp1(): global temp_t temp_t =1 ...
- CF1322B-Present【双指针】
正题 题目链接:https://www.luogu.com.cn/problem/CF1322B 题目大意 给出\(n\)个数字\(a_i\)求 \[\bigoplus _{i=1}^n\bigopl ...
- 面试必问:Java 垃圾回收机制
摘要:垃圾回收机制是守护线程的最佳示例,因为它始终在后台运行. 本文分享自华为云社区<一文带你了解Java 中的垃圾回收机制>,作者:海拥. 介绍 在 C/C++ 中,程序员负责对象的创建 ...
- 手动实现 shared_ptr
面试写了一个基础的 scoped_ptr,被面试官要求写 shared_ptr,一时语塞.面试官不断提示我说在现有的基础上实现 shared_ptr 很简单,真的很简单,宛如在不断暗示我 1+1 就是 ...
- 关于docker复现vulhub环境的搭建
原本想用docker复现一下vul的漏洞. 装docker过程中遇到了很多问题, 昨天熬夜到凌晨三点都没弄完. 中午又找了找原因,终于全部解决了, 小结一下. 0x01 镜像 去官方下载了centos ...
- HTML基本标记
头部标记 <head></head> 说明:元素的作用范围是整篇文档.元素中可以有元信息定义.文档样式表定义和脚本等信息,定义在HTML语言头部的内容往往不会在网页上直接显示. ...