[前端][fmui]图片解析失败，刷新页面后可正常展示问题

知识库1

知识库2

问题现象

知识库一：

• 上传附件后，预览显示图片解析失败，刷新页面后可正常展示。
• 将后台返回的地址直接在浏览器标签页打开，图片可以正常展示 知识库二：
• 页面初始化时偶尔会出现图片解析失败问题

问题原因

知识库1： 可能是图片还没有存储好，前台就去加载图片了，导致图片加载失败。 知识库2： 第二个知识库是直接初始化的时候就已经返回图片地址了，但还是加载失败，使用下面方案也可以成功解决

解决方案

给图片添加时间戳，并在图片加载失败后刷新图片src尝试重新加载图片

//刷新图片src
function refreshImage(imgElement) {
    var timestamp = new Date().getTime();
    var imgSrc = imgElement.src;
    // 检查是否已有时间戳参数
    var regex = /([&?])t=\d+/;

    if (regex.test(imgSrc)) {
        // 替换已有的时间戳
        imgElement.src = imgSrc.replace(regex, '$1t=' + timestamp);
    } else {
        // 添加新的时间戳参数
        var separator = imgSrc.indexOf('?') === -1 ? '?' : '&';
        imgElement.src = imgSrc + separator + 't=' + timestamp;
    }
}

function loadImage(imgElement){
    var time = 0;
    imgElement.onerror = function(){
        time++;
        if(time < 15){
            // 刷新图片src尝试重新加载图片
                refreshImage(imgElement);
        }else{
            // 如果图片加载失败，则替换为默认图片
        }
    };
    imgElement.onload = function(){
        // 图片加载成功操作
    };
}