HTML中<IMG>标签onerror属性图片加载失败用法

逻辑织雪使
• 阅读 223

HTML中<IMG>标签onerror属性图片加载失败用法

今天写程序的时候,发现img标签中有一个onerror属性,以前没有用过,百度了一下,原来他的作用是非常大而且实用的:
我们都不希望用户看到我们网站上面出现无效的图片,即便是出现了无效的图片我们也希望以一种友好的方式告诉用户图片无效,而不是直接给用户看默认的红叉;怎么办,我们可以在图片的onerror事件中将图片的src属性设置为我们网站上已存在的表示图片不存在的图片。从此我们就不需要用程序来判断在数据库里读出来的数据是否存在了,就简化了一步:
img中的onerror事件可以在图片发生成错误触发一个事件,比如当图片加载失败时,用onerror为当前img指定一个默认图片.
用法  <img src="{$avatar[90]}" width="60" height="60">

点赞
收藏
评论区
推荐文章
Jacquelyn38 Jacquelyn38
4年前
在前端学习道路上,容易混淆的几个知识点!
async与deferasync:可选属性。表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效(写在html文件中的js代码,添加此属性无效,仍按代码加载顺序执行)。defer:可选属性。标识脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。script标签属性async与
浩浩 浩浩
4年前
【Flutter实战】图片和Icon
3.5图片及ICON3.5.1图片Flutter中,我们可以通过Image组件来加载并显示图片,Image的数据源可以是asset、文件、内存以及网络。ImageProviderImageProvider是一个抽象类,主要定义了图片数据获取的接口load(),从不同的数据源获取图片需要实现不同的ImageProvi
Easter79 Easter79
3年前
swiftUi propertWrapper 自定义标记属性
上篇文章我们知道@Status 的作用了那么我们也可以自己定义类似的这种标签。。首先我们先来看下不使用属性标签,向导页面如何写////PropertyWrapperView.swift//learn_swiftUi////Createdbyliuanon2020/9/4.
晴空闲云 晴空闲云
3年前
网页引入svg图片的4种方式
web应用开发使用svg图片,总结了下,可以有如下4种方式:1.直接插入页面。2.img标签引入。3.css引入。4.object标签引入。1.直接插入页面在html页面,可以直接使用svg标签。html运行效果:2.img标签引入除了在网页里直接写svg标签,也可以通过img引入,就像引入j
Wesley13 Wesley13
3年前
#H5#WebStorm的警告
!输入图片说明(https://static.oschina.net/uploads/img/201611/05163209_Lj0x.png"在这里输入图片标题")今天写了个小时的HTML代码,WS提示forminputwithoutanassociatedlabelortitleattribute,然后搜索了下看到百度知道的一个
Stella981 Stella981
3年前
Egret白鹭开发小游戏之自定义load加载界面
刚接触不久就遇到困难自定义loading。想和其他获取图片方式一样获取加载界面的图片,结果发现资源还没加载就需要图片,在网上百度了许多,都没有找到正确的方式,通过自己的摸索,终于,,,我成功了。。。下面介绍一下主要思想:首先,我们需要使用异步加载的方式,在加载界面之前加载loading界面需要的素材,然后再loadingUI中就可以大胆使
Stella981 Stella981
3年前
HTML中meta标签的作用与使用
META标签用来描述一个HTML网页文档的属性META标签可分为两大部分:HTTPEQUIV和NAME变量。HTTP实例HTML代码实例中有一项内容是<metahttpequiv"ContentType"content"text/html;charsetgb2312"其作用是指定了当前文档所使用的字符编码为gb2
Stella981 Stella981
3年前
JavaScript事件详解
1.事件传播机制:事件冒泡,事件捕获。2.注册事件处理程序方式:设置html标签属性为事件处理程序,文档元素的事件处理程序属性,名字由“on”后面跟着事件名组成,例如:onclick,onmouseover,用法如下1<d
Wesley13 Wesley13
3年前
HTML图片标签
<body<!使用img标签来向网页中引入外部的图片,img标签也是一个自结束标签属性:src:设置一个外部图片的路径alt:可以用来设置图片不能显示时,就会显示图
Wesley13 Wesley13
3年前
3D轮播切换特效 源码+注释
这个3D轮播切换特效是我2017年2月份写的当初我刚接触HTML不久,现在把源码分享给大家 源码的注释超级清楚。<!声明文档类型:html作用:符合w3c统一标准规范每个浏览器对htmlcssjs都有自己的编码模式(兼容模式)\ 无序列表标签  盒子模型标签 img图片标签四要素 1<
使用 XPath 定位 HTML 中的 img 标签
引言随着互联网内容的日益丰富,网页数据的自动化处理变得愈发重要。图片作为网页中的重要组成部分,其获取和处理在许多应用场景中都显得至关重要。例如,在社交媒体分析、内容聚合平台、数据抓取工具等领域,图片的自动下载和处理是必不可少的。本文将详细介绍如何在C应用程