useImageLoader.js 1.56 KB
/**
 * 图片加载错误处理 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'

  /**
   * 处理图片加载错误
   * @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
  }
}