点击图片，图片src重新加载（用于图片验证码）

最新推荐文章于 2024-06-25 10:29:28 发布
最新推荐文章于 2024-06-25 10:29:28 发布
阅读量3w 收藏 9
点赞数 4
分类专栏： web前端 文章标签： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liona_koukou/article/details/74391977
版权

效果图：

后台给的链接直接插入html中img的src里，点击图片重新加载这个src因为src的内容一直不变，比如都是

src="http://www.xxx.com/xxx/get?tockenId=QWERTYUISDFGHJEW"

如果刷新页面这个链接返回的图片会改变，为了做到点击图片只重载这个src而整个页面不刷新，采用的方法是

document.getElementById("img").src="http://www.xxx.com/xxx/get?tockenId=QWERTYUISDFGHJEW?"+Math.random();

在后面加上Math.random()

完整代码如下：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>测试页</title>
      <style>
         #img{cursor:pointer;}
      </style>
   </head>
<body>
<img onclick="changeCode();" src="http://www.xxx.com/xxx/get?tockenId=QWERTYUISDFGHJEW" id="img"/>
<script>
   function changeCode(){
      document.getElementById("img").src="http://www.wubapai.com/verifycode/get?tockenId=QWERTYUISDFGHJEW?"+Math.random();
   }
</script>
</body>
</html>

 

 

 

 

 

 

 

辣姐什么鬼
关注
  • 4
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论
专栏目录
html点击重新载入图片,移动端图片等比缩放适应屏幕，及图片懒加载、图片加载失败后点击重新加载...
weixin_39947908的博客
06-03 978
先说一下整体思路图片链接存储在data-lazy中，当img移动到屏幕可视区域后，触发loadImg()，将data-lazy赋值给img的src属性。从而加载图片。HTML实现方式如下先监听屏幕的滚动事件调用throttle()window.onscroll = throttle(checkImgs());throttle()是一个节流操作，让高频连续触发的事件每隔一定的时间长度之后再做出响应。...
html点击重新载入图片,如何在jQuery中重新加载/刷新元素（图像）
weixin_35349608的博客
06-03 2736
如何在jQuery中重新加载/刷新元素(图像)是否可以使用jQuery从服务器重新加载具有相同文件名的图像？例如，我在页面上有一个图像，但是，物理图像可以根据用户操作而改变。 注意，这并不意味着文件名更改，而是实际文件本身。即：用户在默认页面上查看图像用户上传新图像页面上的默认图像不会更改(我假设这是由于文件名相同，浏览器使用缓存版本)无论下面的代码被调用的频率如何，同样的问题仍然存在。$("#m...
img标签重置src资源，图片未重新加载
caizixinyuan的博客
02-18 1053
网上找了些方法，没有解决问题，最后经过一番抓耳挠腮，恍然灵机一动，是不是赋值的时机不对？一开始是在直接进行赋值的，后面写在了加载完成之后的逻辑里面，然后就正常了。前端小白，做的一个项目里用到给img动态重置照片的需求，按照上述的代码进行重新赋值，加载完成后发现img内容并未更换，确认。可以路径正常访问，百思不得其解。小白遇见的问题，做个简单的记录。
图片img的src不变让浏览器重新加载实现方法
12-09
javascript给这个img标签的src属性后面拼接一个 ? 和 javascript对象new Date().getTime()毫秒值做成queryString的样子，就能防止被缓存了在图片地址src不变的情况下让浏览器重新加载图片 实际上，在src不变时，浏览器直接就去读取缓存了 解决办法： var img_src =’http://huoche.7234.cn/images/jb51/gi2rp4tu0vm.jpg?t=’+Math.random(); 这样给图片地址拼接一个随机数，用js重新给 img 的 src 赋值，okay
Html 使用 Img 点击刷新验证码图片问题（无反应）
最新发布
weixin_43206676的博客
06-25 221
html中使用 Img标签进行展示 图形验证码图片 ，刷新无反应
点击图片（验证码）重新加载
Lovely Ruby 的手账
08-14 1363
情景 我在设计一个功能，点击验证码，就切换一下 演示 思路 首先这个请求验证码图片的链接是固定的 很重要的一点：浏览器会把 src、href 等不变的链接缓存起来，下次请求服务器的时候会检查要请求的链接是否在缓存中，如果存在则不向服务器发送请求了。（最常见的比如图形验证码） 根据这个特点，我们可以再链接后面设法加一个随机数，让这个链接每次都是唯一的，这样子浏览器即使缓存了上一个链接，也没办法从缓存中找到一样的链接，所以每次点击更换验证码都会想服务器发起新的请求，从而实现刷新。 浏览器读取页面，css
ajax实现图片点击的局部刷新
no_name_sky的博客
05-17 1049
点击图片刷新文本框的内容 结合ajax来实现，给图片添加一个onclick事件，ajax添加事件处理逻辑，在收到后端的response后对文本框的内容进行刷新。 代码 前端代码： <p>图片点击</p> <img width="20" height="20" src="/static_0/image/flush.jpg" onclick="FlushImg();"> <input id="1i"> <script src="{% static '/js
J2EE验证码图片如何生成和点击刷新验证码
09-02
3. **更新页面**：服务器返回新的验证码后，前端需要更新验证码图片的源（src）属性，确保浏览器重新加载图片。 4. **状态管理**：同时，服务器端和客户端都需要维护验证码的当前状态，以确保验证时的正确性。 ...
VUE实现图片验证码功能
10-16
这个方法接受一个布尔型参数`bRefresh`，用于判断是否需要刷新验证码图片。如果需要刷新，方法中将生成一个新的随机参数附加到图片资源的URL后面，确保每次加载的图片都是不同的。如果使用后端接口来获取验证码，则...
jQuery点击输入框显示验证码图片
10-22
### jQuery点击输入框显示验证码图片知识点解析 #### 1. jQuery基础知识 jQuery是一个快速、小巧、功能丰富的JavaScript库。它通过减少JavaScript的代码量来简化HTML文档遍历、事件处理、动画和Ajax交互，极大地...
django项目登录中使用图片验证码的实现方法
09-18
同时，为了确保每次刷新页面时验证码都会更新，可以在JavaScript中设置一个事件监听器，重新加载验证码图片。 ```javascript document.getElementById('captcha-img').addEventListener('click', function() { ...
验证码图片自动识别
10-13
开发者可能已经实现了一个Java应用程序，用于加载验证码图片，进行预处理，然后使用某种形式的OCR技术进行识别。 总结起来，验证码图片自动识别是一项涉及图像处理、特征提取和机器学习的技术。通过Java编程，我们...
J2EE如何生成验证码图片和点击刷新验证码
weixin_30719711的博客
04-29 140
验证码图片生成步骤 创建BufferedImage对象。 获取BufferedImage的画笔，即调用getGraphics()方法获取Graphics对象。 调用Graphics对象的setColor()方法和fillRect()方法设置图片背景颜色。 调用Graphics对象的setColor()方法和drawLine()方法设置图片干扰线。 调用BufferedImaged对象...
Vue3+ElementPlus，image动态更新src
y523648的博客
11-24 950
不知道为什么不能直接修改ImageUrl。修改为target.src，解决问题。
点击按钮实时刷新图片
wkf_java的博客
12-24 2084
js给的src赋值 最近做一个点击一个按钮刷新加载另一张图片的功能,主要就是改变图的路径,记录一下自己遇到的坑 支持原生的js和jq实现 用js原生方法： document.getElementById(“imageId”).src = “xxxx.jpg”; 用Jquery方法： $("#imageId").attr(“src”,“xxxx.jpg”); 误区 两种方法容易混用,平时写前端不多没有注意到这个问题 $("#imageId").src = “xxxx.jpg”; document.g
图形验证码php点击刷新,ThinkPHP实现点击图片刷新验证码
weixin_39726971的博客
03-19 270
本篇文章介绍了thinkphp框架实现点击图片刷新验证码的方法，希望对学习thinkphp的朋友有帮助！ThinkPHP实现点击图片刷新验证码本类验证码功能刷新功能，涉及到两个刷新，一个是点击验证码图片刷新，另一个是输错验证码刷新，当然自己刷新那就不要说了，那是肯定会刷新的。thinkPHP框架里面内置了verify.class.php验证类，我们做验证码验证的时候就非常简单了，这里提供两种验证的...
点击验证码无刷新重新加载验证码图片
zhglhy的专栏
08-19 740
   生成验证码图片的image.jsp： &lt;%@page contentType="image/jpeg;charset=utf-8"%&gt; &lt;%@page import="java.util.*,java.awt.*,java.awt.image.*,javax.imageio.*" %&gt; &lt;%@ page import="java.io.OutputStre...
Java web实现单击验证码 刷新图片 （Jquery ）
weixin_46999174的博客
09-24 1213
首先 通过绑定 id 获取 img 对象 然后添加单击事件 $("#img_check").click(function () { this.src="${basePath}kaptcha.jpg" }) this 这里便是指的是 当前对象 需要注意的是 src 可读可写 可以读出来 src的值 同样 可以 赋予url地址 需要替换成你自己验证码地址 不会配置验证码？ 传送门：配置验证码 这样写 看似没有问题 当换了浏览器 就可能发现 只
js实现img src更新请求
AI开源工具分享
11-28 3821
[javascript] view plaincopy 1.javascript(更新的函数)   [javascript] view plaincopy     [javascript] view plaincopy "text/javascrip
springboot 图片验证码 实现
07-15
在 Spring Boot 中实现图片验证码可以通过以下步骤进行： 1. 添加依赖：在 `pom.xml` 文件中添加以下依赖项： ```xml <dependency> <groupId>com.github.axet</groupId> <artifactId>kaptcha</artifactId> <version>0.0.9</version> </dependency> ``` 2. 创建验证码生成器：创建一个验证码生成器类，用于生成验证码图片。可以参考以下示例代码： ```java import com.google.code.kaptcha.impl.DefaultKaptcha; import com.google.code.kaptcha.util.Config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import java.util.Properties; @Configuration public class CaptchaConfig { @Bean public DefaultKaptcha defaultKaptcha() { DefaultKaptcha defaultKaptcha = new DefaultKaptcha(); Properties properties = new Properties(); properties.setProperty("kaptcha.border", "no"); properties.setProperty("kaptcha.textproducer.font.color", "black"); properties.setProperty("kaptcha.image.width", "150"); properties.setProperty("kaptcha.image.height", "50"); properties.setProperty("kaptcha.textproducer.char.length", "4"); Config config = new Config(properties); defaultKaptcha.setConfig(config); return defaultKaptcha; } } ``` 3. 创建验证码接口：创建一个接口或控制器，用于处理验证码相关的请求，并将生成的验证码图片返回给前端。示例代码如下： ```java import com.google.code.kaptcha.impl.DefaultKaptcha; import com.google.code.kaptcha.util.Config; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RestController; import javax.imageio.ImageIO; import javax.servlet.http.HttpServletResponse; import java.awt.image.BufferedImage; import java.io.IOException; import java.io.OutputStream; @RestController public class CaptchaController { private final DefaultKaptcha captchaGenerator; @Autowired public CaptchaController(DefaultKaptcha captchaGenerator) { this.captchaGenerator = captchaGenerator; } @GetMapping("/captcha") public void getCaptcha(HttpServletResponse response) throws IOException { // 生成验证码 String captchaText = captchaGenerator.createText(); BufferedImage captchaImage = captchaGenerator.createImage(captchaText); // 将验证码文本存储在 session 中（可根据具体需求存储在其他地方） // request.getSession().setAttribute("captcha", captchaText); // 将验证码图片输出给前端 response.setContentType("image/jpeg"); try (OutputStream outputStream = response.getOutputStream()) { ImageIO.write(captchaImage, "jpeg", outputStream); outputStream.flush(); } } } ``` 4. 前端页面：在前端页面中使用 `<img>` 标签来显示验证码图片，并添加一个刷新按钮。示例代码如下： ```html <!DOCTYPE html> <html> <head> <title>Captcha Demo</title> </head> <body> <h1>Captcha Demo</h1> <img id="captchaImage" src="" alt="Captcha"> <button onclick="refreshCaptcha()">Refresh</button> <script> function refreshCaptcha() { var captchaImage = document.getElementById("captchaImage"); captchaImage.src = "/captcha?t=" + new Date().getTime(); } // 页面加载时刷新验证码 window.onload = function() { refreshCaptcha(); }; </script> </body> </html> ``` 这样就可以在 Spring Boot 中实现图片验证码了。用户可以通过访问 `/captcha` 路径获取验证码图片，并在前端页面中显示。每次刷新验证码时，可以调用 `refreshCaptcha()` 函数来更新验证码图片。请根据自己的需求进行相应的调整和扩展。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

辣姐什么鬼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值