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

全栈程序员站长

发布于 2022-09-03 13:37:18

4K00

代码可运行

运行总次数：0

代码可运行

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

加载失败后显示默认图：

<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.cn/139932.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年5月2，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度