useImageLoader.js
1.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
/**
* 图片加载错误处理 composable
* 提供统一的图片加载错误处理逻辑
*
* @Date: 2026-01-18
* @Description: 统一处理图片加载失败,替换为默认头像
*/
/**
* @function useImageLoader
* @description 提供图片加载错误处理功能
* @returns {Object} 包含图片错误处理方法的对象
*/
export function useImageLoader() {
/**
* 默认头像 URL
*/
const DEFAULT_AVATAR = 'https://cdn.ipadbiz.cn/mlaj/images/default-avatar.jpeg?imageMogr2/thumbnail/200x/strip/quality/70'
/**
* 处理图片加载错误
* @param {Event} e - 图片加载错误事件对象
* @param {string} [fallbackUrl] - 自定义的备用图片 URL
*/
const handleImageError = (e, fallbackUrl = DEFAULT_AVATAR) => {
if (e.target && e.target.src) {
e.target.src = fallbackUrl
}
}
/**
* 处理图片加载错误(带重试逻辑)
* @param {Event} e - 图片加载错误事件对象
* @param {string[]} fallbackUrls - 备用图片 URL 列表,按顺序尝试
*/
const handleImageErrorWithRetry = (e, fallbackUrls) => {
if (e.target && e.target.src) {
const currentSrc = e.target.src
const currentIndex = fallbackUrls.indexOf(currentSrc)
if (currentIndex >= 0 && currentIndex < fallbackUrls.length - 1) {
// 尝试下一个备用 URL
e.target.src = fallbackUrls[currentIndex + 1]
} else if (fallbackUrls.length > 0) {
// 使用第一个或最后的备用 URL
e.target.src = fallbackUrls[0]
}
}
}
return {
handleImageError,
handleImageErrorWithRetry,
DEFAULT_AVATAR
}
}