图片加载失败后显示默认图片

图片加载失败后显示默认图片加载失败后显示默认图:<img:src=”`${img}.png`”onerror=”javascript:this.src=’logo.png'”/>也可以在图片加载失败后弹出提示:<imgsrc=”image.gif”onerror=”alert(‘图片不能被加载。’)”>扩展小知:img除了支持加载失败的回调,也支持加载中断及加载成功的回调。用法:onabort:<imgsrc=”image_w3default.gif”onabort

大家好,又见面了,我是你们的朋友全栈君。

加载失败后显示默认图:

<img :src="`${ 
     img}.png`" onerror="javascript:this.src='logo.png'"/>

也可以在图片加载失败后弹出提示:

<img src="image.gif" onerror="alert('图片不能被加载。')">

扩展小知:
img除了支持加载失败的回调,也支持加载中断及加载成功的回调。
在这里插入图片描述

用法

onabort:

<img src="image_w3default.gif" onabort="abortImage()">

function abortImage(){ 
   
    alert('Error: 图像加载终止!')
}

onload:

<img src="w3javascript.gif" onload="loadImage()">

function loadImage(){ 
   
alert("图片加载完成");
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/139932.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号