上传新图片后如何不刷新页面即可更新div的背景图片

你的问题核心是浏览器缓存：你两次请求的图片URL完全一致，浏览器会直接复用之前缓存的旧图片，就算服务端的图片已经更新了，前端也不会拉取新资源，所以看起来修改没生效。你之前先设置none再设置回原URL的操作不会触发浏览器重新请求资源，因此无效。

1. 前端加时间戳破缓存（最稳妥，优先用） #

给图片URL追加随机的时间戳查询参数，让每次请求的URL都不一样，浏览器就会跳过缓存重新拉取最新资源，修改updateLogo方法即可：

function updateLogo() {
    console.log("update");
    // 追加时间戳参数，参数名可以任意，只要每次值不一样就行
    $("#chain-logo").css("background-image", `url("/api/images/chain/${chainId}?t=${Date.now()}")`);
}

2. 服务端配置缓存策略（可选，配合使用更规范） #

在/api/images/chain/[id]接口的响应头中添加禁止缓存的配置，示例配置如下：

Cache-Control: no-cache, no-store, must-revalidate
Expires: 0

配置后浏览器就不会主动缓存这个接口的返回资源，不需要前端加参数也能拿到最新资源。

确认上传接口是否正常执行成功：可以在fetch的回调中添加错误捕获逻辑，避免接口报错时没有执行updateLogo方法：

function uploadLogo() {
    let file = document.getElementById("logo-input").files[0];
    if (!file) return;
    let formData = new FormData();
    formData.append("logo", file);

    fetch(`/chain/${chainId}/upload/logo`, {
        method: "POST",
        body: formData
    })
    .then(response => {
        if (!response.ok) throw new Error('接口请求失败')
        return response.json()
    })
    .then(data => {
        updateLogo();
    })
    .catch(err => {
        console.error('上传出错：', err)
    });
}

确认chainId变量值正确，避免请求URL拼接错误。

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