Vue项目App图标偶发加载失败无报错，求重试方案及示例代码

实现思路 #

• 给img标签绑定error事件，捕获加载失败状态
• 为每个图标维护重试次数，避免无限重试
• 可选添加随机延迟，降低重试时的服务器并发压力
• 超过重试上限后切换为默认占位图标

修改后的完整代码 #

模板部分

<div class="apps__list" v-for="app in AppData.appList" v-bind:key="app.app_name">
    <span>
        <img 
            v-bind:src="AppData.getAppIcon(app)" 
            @error="handleImgError($event, app)"
            alt="App图标"
        />
    </span>
    <div class="text">
        <span class="text text--ellipsis">{{ app.app_name }}</span>
    </div>
</div>

脚本部分

// 获取AppData后初始化每个app的重试计数
initAppRetryCount() {
    this.AppData.appList.forEach(app => {
        app.retryCount = 0;
    });
},

getAppIcon(app) {
    let assetsURL = "/images/xhdpi_2x/";
    return `${assetsURL}/${app.icon_name}.png`;
},

handleImgError(event, app) {
    const maxRetry = 3; // 最大重试次数
    const imgElement = event.target;
    
    if (app.retryCount >= maxRetry) {
        // 重试上限，切换到默认占位图
        imgElement.src = "/images/default_app_icon.png";
        return;
    }

    app.retryCount++;
    // 随机延迟100-500ms后重试，避免并发请求
    setTimeout(() => {
        // 加时间戳参数规避浏览器缓存失败请求
        imgElement.src = `${this.getAppIcon(app)}?t=${Date.now()}`;
    }, Math.floor(Math.random() * 400) + 100);
}

关键说明 #

1. 重试次数控制：通过给每个app对象添加retryCount属性，限制最大重试次数，防止无限循环
2. 缓存规避：添加?t=${Date.now()}参数，避免浏览器缓存失败的请求
3. 默认占位图：超过重试次数后显示预设的默认图标，保证界面完整性
4. 延迟重试：随机延迟减少服务器瞬间请求压力，尤其适合批量加载图标场景

内容的提问来源于stack exchange，提问作者Firnaz