不刷新页面重载图片：JavaScript实现失败求助（API图片）

先梳理你代码里的几个问题，再给出修复后的完整方案：

原代码的问题点 #

• 第一个引入jQuery的<script>标签未闭合，导致后续脚本无法被浏览器正确解析
• setInterval传入字符串"atualizarqr()"属于不良写法，容易引发解析问题，应该直接传函数引用
• <body>上的onload="atualizarqr"既没有加执行括号（不会触发函数），又和window.onload重复绑定，完全多余
• 核心逻辑缺失：你要从API获取图片，但原代码只是固定设置一张图片地址，没有调用API的逻辑
• 未处理浏览器缓存：即使API返回新图片，浏览器可能缓存旧地址，导致看不到更新

修复后的完整代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
window.onload = function(){
    setInterval(atualizarqr, 3000); // 每3秒触发一次图片更新
}

function atualizarqr(){
    // 替换成你的实际图片API接口地址
    $.get('你的图片API地址', function(response){
        // 假设API返回的数据里包含图片URL，比如response.imageUrl
        var newImgUrl = response.imageUrl;
        // 追加时间戳参数，强制浏览器请求最新图片，避免缓存
        newImgUrl += '?' + Date.now();
        document.getElementById('img').src = newImgUrl;
    }).fail(function(){
        // API请求失败时，显示备用图片
        document.getElementById('img').src = "https://santoaleixo.com.br/wp-content/uploads/2018/11/Logo-Santo-Aleixo-3.png";
    });
}
</script>
<body>
    <img src="" id="img" alt="动态更新图片"/>
</body>

关键说明 #

• 用jQuery的$.get发起API请求，成功后拿到最新图片地址并更新img标签的src
• 追加?+时间戳的参数，彻底解决浏览器缓存旧图片的问题
• 增加失败回调，保证API出错时页面也能显示备用图片
• 修复了所有语法错误和不必要的重复逻辑

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