首先img的src可以使用远程图片，也就是说他同样是可以请求后端的，这也就是实现图形验证码随机显示的原理。

配置html页面

• 使用img组件，src请求一个后台地址。
• 点击图片，传递随机数，获取随机验证码。
• 下面代码基于Thymeleaf，因此使用了th:src属性。普通的页面的话，可以直接使用src属性。

 <span class="yzm-pic">
<img th:src="@{/ran/random}" th-alt="验证码，点击图片更换" onclick="this.src='/ran/random?random='+Math.random();" />
</span>

注意：
其实，onclick是一个难点，点击之后传递一个随机数。使用this.src重新给该图片赋值。

实现后台控制方法

最终是使用ImageIO方法进行验证码的绘制。

@RequestMapping({"/ran/random"})
    public void genericRandomCode(HttpServletRequest request, HttpServletResponse response) throws IOException {
        response.setHeader("Cache-Control", "private,no-cache,no-store");
        response.setContentType("image/png");
        byte width = 85;
        byte height = 28;
        BufferedImage image = new BufferedImage(width, height, 2);
        Graphics2D g = image.createGraphics();
        g.setComposite(AlphaComposite.getInstance(3, 1.0F));
        Random random = new Random();
        g.setColor(new Color(231, 231, 231));
        g.fillRect(0, 0, width, height);
        g.setFont(new Font("Microsoft YaHei", 2, 24));
        String sRand = "";
        for(int responseOutputStream = 0; responseOutputStream < 4; ++responseOutputStream) {
            String rand = String.valueOf(random.nextInt(10));
            sRand = sRand + rand;
            g.setColor(new Color(121, 143, 96));
            g.drawString(rand, 13 * responseOutputStream + 16, 23);
        }
        g.dispose();
        ServletOutputStream var12 = response.getOutputStream();
        ImageIO.write(image, "png", var12);
        var12.close();
    }

• for循环里面控制了一下随机数的位数，这里为4位。

通过以上方法，实现了随机校验码。