【HTML】解决 img 标签 src 属性值相同时,图片并不刷新的问题

您所在的位置:网站首页 什么新的图片 【HTML】解决 img 标签 src 属性值相同时,图片并不刷新的问题

【HTML】解决 img 标签 src 属性值相同时,图片并不刷新的问题

2024-05-30 11:22| 来源: 网络整理| 查看: 265

项目场景

今天要用python的flask框架做一个简单的demo网站。

问题描述

我的index.html文件中有一行代码:

然后我需要通过js代码来更新src属性:

$("#input").attr('src', 'input.jpg')

但如果新的src属性值和原属性值相同时,发现图片并不会更新。

这里你可能会问,既然要更新src属性,为什么新的属性值还是和原来一样?其实是有这种需求的。比如一张名为a.jpg的图片,经过一系列的操作处理后,我需要保存,保存方式选择覆盖原图,那么保存后的图片不还是a.jpg嘛,虽然我们知道这个a.jpg和原来的a.jpg已经不是同一张图片了,但是浏览器中的html的img标签并不知道,因为图片名字并没有变化。

原因分析

推测可能是浏览器中的缓存机制造成的。虽然图片的内容改变了,但图片名字没有改变,浏览器中的html中的img标签没有检测到src属性值的变化,还是用的还是之前的缓存。

解决方案

在修改img的src属性的时候加上一个随机数即可,让浏览器以为每次请求的图片路径都不同,这样就能加载新的图片,而不是缓存。

$("#input").attr('src', 'input.jpg''?'+Math.random()) 引用参考

https://blog.csdn.net/joker_zhou/article/details/50137127



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3