在图片没有加载完成时设置默认图片

在图片没有加载完成时设置默认图片

• 一、设置默认图片的原因
• 二、代码实现
• • [1. 使用 placeholder 属性](#1. 使用 placeholder 属性)
  • [2. 使用 onerror 事件](#2. 使用 onerror 事件)
• 三、总结

---

一、设置默认图片的原因

我们在进行前端开发的时候，发现当页面中的原图没有完成加载时，页面的位置会显示空白，当加载完成后，图片突然出现会显得很突兀，甚至页面布局还会发生跳动，让用户体验感变得很差。为了解决以上问题，我们要在图片没有加载完成时，设置默认图进行占位。

---

二、代码实现

在图片没有加载完成时设置默认图片，主要有两种方法：

1. 使用 placeholder 属性

在 img 标签中添加 placeholder 属性，并将其值设置为默认图片的 url，当原图加载失败或未加载时，会显示这个默认图片。

<img src="原始图片url" placeholder="默认图片url" alt="图片描述">

2. 使用 onerror 事件

当图片加载失败时触发 onerror 事件，在此事件的处理函数中将 src 属性设置为默认图片的 url。

<img :src="getSrc()" @error="onImgError($event)" />

//图片不存在时触发
onImgError(e){
	let img = e.srcElement;
    img.src = '默认图片url';
    img.onerror = null;
}

getSrc(){
	return require('原始图片url')
}

三、总结

• placeholder 属性：这是一个更简洁、更声明式的方法，如果浏览器支持，可以直接使用；
• onerror 事件：这种方法兼容性更好，并且允许你在图片加载失败时执行更复杂的逻辑，例如记录日志或者提供更多的错误信息。