写更换背景图片功能时，由于上传后图片同一命名，导致新的图片没有加载。

最新推荐文章于 2023-03-27 14:44:42 发布

原创最新推荐文章于 2023-03-27 14:44:42 发布 · 214 阅读

0 ·

CC 4.0 BY-SA版权

web前端基础同时被 2 个专栏收录

18 篇文章

订阅专栏

vue

6 篇文章

订阅专栏

本文介绍了解决因图片缓存导致的新图片无法正常加载的问题。通过在HTTP头部加入禁止缓存设置，并在JS中为图片URL添加时间戳参数，确保每次请求都能获取最新图片。

问题：
写更换背景图片功能时，由于上传后图片同一命名，导致新的图片没有加载。

解决方法:

1.meta部分：

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">

2.JS部分：图片src+'?t='+(+new Date())

axios({
 url:showcenterip+"/savaWorkinterfaceInformation.json?tokena="+tokena,
 method:"post",
 data:formData, 
})
.then(function(response){
    console.log("程序执行");
    localStorage.setItem("backgroundPicUrl",response.data.backgroundPicUrl);
    $("#bgimg").attr("src","#");
    $("#bgimg").attr("src",showcenterip+response.data.backgroundPicUrl+'?t='+(+new Date())); 
})