url链接没变,链接中的图片变了，浏览器显示的还是旧的内容？

最新推荐文章于 2024-06-12 19:09:20 发布

huazizhanye、

最新推荐文章于 2024-06-12 19:09:20 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js 文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/wzsud/article/details/125206767

js 专栏收录该内容

5 篇文章

订阅专栏

当后端动态生成图片或替换图片但URL未改变时，浏览器会使用缓存显示旧图片。解决此问题有两种常见方法：一是后端每次生成随机文件名，但这可能导致追溯困难；二是前端通过在URL末尾添加时间戳或随机数强制浏览器重新加载。这两种方法都能有效刷新浏览器缓存，确保显示最新图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后端动态生成图片或者替换图片后，返回给前端的图片链接没变，浏览器显示的还是旧的内容？

问题原因：当浏览器第一次解析了图片地址后，会将其缓存下来，图片虽然改变了，但是链接没有发生变化，浏览器默认会从上次的缓存取出，所以图片没有发生变化

解决办法

（1）后端每次重新生成的链接名字给随机名称
缺点：可能需要记录当前链接做查询之类的，如果随机图片名称，可能没办法追溯
（2）前端自己处理，给图片后面添加 ?随机数或者给 ?时间,类似于版本控制

https:www.123.com/img.png + '?' + new Date()
// 或者
https:www.123.com/img.png + '?' + Math.random() * 1000000

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

huazizhanye、

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

浏览器输入URL，按下回车经历了哪些流程？

高山景行，一尘不染

09-02

392

经历流程： 浏览器向DNS服务器请求解析该URL中的域名所对应的IP地址；解析出IP地址后，根据IP地址和默认端口，和服务器建立TCP连接 浏览器发出读取文件（URL中域名后面部分对应的文件）的HTTP请求，该请求报文作为TCP三次握手的第三个报文的数据发给服务器；服务器对浏览器请求作出响应，并把对应的html文本发送给浏览器 释放TCP连接，也就是断开TCP连接（四次挥手） 浏览器将该html文本并显示内容三次握手：第一次握手：客户端发送第一个包，其中SYN标志位为1, ACK.

服务器上更改了图片，但是页面访问还是原来的图片

qq_43381010的博客

03-12

6978

通过代码把服务器上原来的图片删除了，重新上传了一个同名的图片。但是浏览器访问图片路径还是原来的图片。重启服务器才行。刷新网页、resin和tomcat都是这种情况。和浏览器缓存没有关系。路径也绝对正确。最后找到原因：这是因为浏览器首次读取服务端的图片之后，再次读取同名图片，会直接从临时文件中读取，不再请求服务端。如果清除浏览器缓存，则图片更新。解决办法：可以修改图片名，给图片加上时间戳。...

2 条评论您还未登录，请先登录后发表或查看评论

Glide加载网络图片，显示之前的URL图片，换了URL图片还是没变的问题

wjr1949的博客

05-08

3720

因为Glide加载图片会将图片缓存到本地，如果url不变则直接读取缓存不会再网络加载。解决方法有两个： 1.每次加载都清理缓存。这是个很垃圾的解决方法，相当于舍弃了缓存这个非常重要的功能。 2.图片地址采用这种：url+?随机数。当图片更换的时候，后台改变随机数就可以，这样你本地就会重新加载网络图片。如果后台没有这样做那你可以自己加随机数，在url后面添加“？”和随机的key+随机数

SDWebImage支持URL不变时更新图片内容

YLGWHYH的专栏

02-15

1694

转载至：http://blog.handy.wang/blog/2016/01/29/sdwebimagehuan-cun-zhi-tu-pian-urlbu-bian/ SDWebImage在iOS项目中是一个很常用的开源库，而且众所周知的是，它是基于URL作为Key来实现图片缓存机制的。在90%左右的情况下，图片与URL是一一对应的，即使服务器修改了图片也会相应的变更URL。但是在少数情...

OSS更新图片后，访问图片链接显示的还是之前缓存的图片解决方法。

Misnice的博客

02-20

2736

当oss图片文件名已存在，进行上传覆盖图片时，浏览器拿到的图片还是之前缓存过的图片。可在图片链接地址后面添加?和随机数。如图片地址:https://www.test.com/banner.jpg, 添加随机数后:https://www.test.com/banner.jpg?324324324 ...

c#替换图片，网站还显示之前的旧图

wq6ylc88的博客

12-04

486

当你替换了图片以后，会发现网页上面的图还是原来的图片。这是因为浏览器会缓存页面中的图片，Ctrl+F5强制刷新就ok。

07-17

PyQt6 浏览器组件重写createWindow函数使用if self.hovered_url.isValid(): self.add_new_tab(self.hovered_url)后无法打开在原标签页打开self.hovered_url链接,如百度AI的图片变清晰这个点击后没效果

07-18

用户希望覆盖createWindow函数，以便在悬停链接时能够在新标签页中打开链接，但发现某些特定链接（如百度AI的“使图片更清晰”）在点击时没有反应。根据用户描述，他们尝试使用以下逻辑： if self.hovered_url....

PyQt6 浏览器组件重写createWindow函数使用if self.hovered_url.isValid(): self.add_new_tab(self.hovered_url)后无法打开在原标签页打开self.hovered_url链接,如百度AI的图片变清晰,还有很多的标签的都不行，最好不要单独设置

热门推荐

ganges_zs的博客

09-03

1万+

在服务端的图片更新之后，前端的图片没有更新？这是因为浏览器首次读取服务端的图片之后，再次读取同名图片，会直接从临时文件中读取，不再请求服务端。如果清除浏览器缓存，则图片更新。可以修改图片名，或者给图片加上版本号。 var version = Math.random(); <img src="./test.png?"+version /> ...

Img标签的url连接的内容改变了，但是url连接本身不变，在火狐浏览器无法实现图片的刷新（谷歌浏览器可以）

qq_31645371的博客

06-14

708

代码内容如下：通过点击图片实现图片的刷新以上方法里面的代码，只能在谷歌浏览器中实现想要的效果 bug修改：

照片服务器已存在如何修改,图片url不变，服务端图片更新，客户端同步如何解决...

weixin_33462167的博客

08-09

889

突然看到这两篇文章SDWebImage 处理url链接中图片更新问题,URL不变，服务端图片更新，客户端同步更新问题。想起来曾经面试问到过的问题，到时候回答时候说给每个图片链接加个标识，服务端改变图片的时候改变标识，清除前端缓存，重新下载图片。但是这明显不合理，图片会改变很多次，标识的话那的多少标识？看了这两篇文章才知道HTTP协议本身就有对这个问题的解决机制。平时我们为了节约流量以及提升用户体验...

浏览器会缓存页面中的图片。当你替换了图片以后，发现地址已经变了但是页面上的图并没有变。

肖肖肖丽珠的博客

06-20

3041

只需要再图片的url后面加个随机值就可以啦。用?连接。 $("#img").attr("src",res.data.path+'?'+Math.random());//避免浏览器的缓存.加随机数

Java WEB 更换图片的问题-更换后图片没有改变的问题

Txwtech笛克特科

10-15

7862

Java WEB 更换图片的问题-更换后图片没有改变的问题清理浏览器缓存就ok了。或者点这个按钮 eclipse里面

Glide加载图片URL不变则图片还是以前的旧图片

pxcz110112的博客

09-18

2520

因为Glide加载图片会将图片缓存到本地，如果url不变则直接读取缓存不会再网络加载解决方法： 1.每次加载都清除缓存（最差的方法），相当于舍弃了缓存这个重要的功能。 2.让后台每次都更改图片名字。 3.图片地址用 url+"?key="+随机数这种格式 Glide.with(context).load(dataList.get(positi...

在css样式表中,background:url()添加了图片路径可是在网页上面显示不出来，是什么回事，求大神。。。。。

weixin_44385802的博客

01-03

5480

在css样式表中,background:url()添加了图片路径可是在网页上面显示不出来，是什么回事，求大神。。。。。欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持，除了...