使用setInterval修改img src后图片未更新，求排查问题

通过setInterval定时修改id为imgg的img元素的src属性，控制台显示src已正确变更，但页面中的图片并未更新。

我的JavaScript代码 #

var paths = ['img/img1.jpg', 'img/img2.jpg'];

var img = document.getElementById('imgg');
var i = 0;
var timer = setInterval(function () {
    // 如果到达数组末尾，重置索引
    if (i >= paths.length) {
        i = 0;
    }

    img.src = paths[i];
    console.log(img.src);
    i = i + 1; // 更新索引
}, 10000);

我的HTML代码 #

<a href="#" style="object-fit: contain;" class="image profilepic"><img id="imgg" src="img/img1.jpg" alt="image" data-position="center center" /></a>

1. 浏览器缓存拦截 #

这是最常见的问题：浏览器会缓存已加载的图片资源，即使修改了src，若资源路径未发生实质变化，浏览器会直接读取缓存而不重新请求新资源。

解决方法：在图片URL后添加随机时间戳参数，强制浏览器重新请求：

img.src = paths[i] + '?t=' + Date.now();

Date.now()生成的时间戳会让每次请求的URL唯一，彻底规避缓存干扰。

2. 图片加载失败（无控制台报错） #

控制台显示src已更新，但新图片可能因路径错误、资源不存在等原因加载失败，而浏览器默认不会主动提示这类静默错误。

解决方法：给img元素添加错误监听，排查加载问题：

img.addEventListener('error', function(e) {
    console.error('图片加载失败:', e.target.src);
});

根据报错信息检查图片路径是否正确、资源是否存在于指定位置。

3. 父元素样式影响显示 #

父元素<a>的object-fit: contain样式无效（object-fit仅适用于img、video等替换元素），若父元素还有overflow: hidden、display: none等样式，可能导致图片无法正常显示。

解决方法：将object-fit样式转移到img元素上，并检查父元素的CSS：

<a href="#" class="image profilepic"><img id="imgg" src="img/img1.jpg" alt="image" data-position="center center" style="object-fit: contain;" /></a>

同时排查.image.profilepic类是否有隐藏或覆盖图片的样式。

4. DOM元素被意外移除 #

虽然控制台显示src已变更，但定时器执行时，img元素可能已被其他脚本动态移除出DOM，导致修改的是已脱离页面的元素。

解决方法：在定时器内重新获取img元素，确保操作的是当前DOM中的有效元素：

var timer = setInterval(function () {
    var img = document.getElementById('imgg');
    if (!img) {
        clearInterval(timer); // 元素不存在时停止定时器
        return;
    }
    // 后续逻辑...
    if (i >= paths.length) {
        i = 0;
    }
    img.src = paths[i] + '?t=' + Date.now();
    console.log(img.src);
    i++;
}, 10000);

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