图片加载失败重试,重试至预期次数使用占位图

支持自定义重试次数,支持重试回调,支持重试使用备用域名。 这里使用自定义指令做了封装,可读性MAX!!!

运行截图 调用方式

ini 复制代码
    <img
      v-useReload="{
        src: 'https://user-images.githubusercontent.com/10731096/95823103-9ce15780-0d5f-11eb-8010-1bd1b5910d4f.png',
        callback: (e, count) => {
          console.log('重试次数:', count, e);
        },
      }"
      src="https://user-images.githubusercontent.com/10731096/95823103-9ce15780-0d5f-11eb-8010-1bd1b5910d4f2.png"
    />
    <img
      v-useReload="reload"
      src="https://user-images.githubusercontent.com/10731096/95823103-9ce15780-0d5f-11eb-8010-1bd1b5910d4f2.png"
    />

话不多说直接上代码

ini 复制代码
/**
 * Description
 * 方式一:<DOM v-useReload />
 * 方式二:<DOM v-useReload="{errorImg,maxRetries,src,callback}" />
 * 方式三:<DOM v-useReload="callback" />
 * @author ZHYCH
 * @date 2024-12-27
 * @param {any} el:HTMLElement
 * @param {any} binding:DirectiveBinding<option>
 * @returns {any}
 */
import { DirectiveBinding } from 'vue';
import errorimg from '@/assets/imgerror.svg';

type callback = (retryCount: number) => void;

interface option {
  errorSrc?: string; //失败地址
  maxRetries?: number; // 最大重试次数
  src?: string; //备用地址
  callback?: callback; //失败回调
}

export default {
  beforeMount(el: HTMLElement, binding: DirectiveBinding<option | null | callback>) {
    const { value } = binding;
    const isObject = typeof value === 'object' && value !== null;

    const maxRetries = value?.maxRetries ?? 3;
    const src = value?.src ?? el.src;
    const errorSrc = value?.errorImg ?? errorimg;
    const callback = isObject ? value?.callback : value;

    let retryCount = 0; // 当前重试次数

    const reloadImage = () => {
      if (retryCount < maxRetries) {
        retryCount++;
        el.src = '';

        setTimeout(() => {
          callback?.(el, retryCount);
          el.src = src;
        }, 0);
      } else {
        el.src = errorSrc;
      }
    };

    el.addEventListener('error', reloadImage);

    // 清理事件监听器
    el._reloadImage = reloadImage;
  },
  unmounted(el: HTMLElement) {
    el.removeEventListener('error', el._reloadImage);
  },
};
相关推荐
LaoZhangAI1 小时前
2025最全GPT-4o图像生成API指南:官方接口配置+15个实用提示词【保姆级教程】
前端
ONE_Gua1 小时前
chromium魔改——CDP(Chrome DevTools Protocol)检测01
前端·后端·爬虫
LaoZhangAI1 小时前
2025最全Cherry Studio使用MCP指南:8种强大工具配置方法与实战案例
前端
咖啡教室1 小时前
前端开发日常工作每日记录笔记(2019至2024合集)
前端·javascript
溪饱鱼1 小时前
Nuxt3能上生产吗?
前端
咖啡教室1 小时前
前端开发中JavaScript、HTML、CSS常见避坑问题
前端·javascript·css
LaoZhangAI3 小时前
Claude MCP模型上下文协议详解:AI与外部世界交互的革命性突破【2025最新指南】
前端
LaoZhangAI3 小时前
2025最全Cursor MCP实用指南:15个高效工具彻底提升AI编程体验【实战攻略】
前端
Kagerou4 小时前
vue3基础知识(结合TypeScript)
前端
市民中心的蟋蟀4 小时前
第五章 使用Context和订阅来共享组件状态
前端·javascript·react.js