移动端QQ浏览器默认发送2次img src请求图片资源 导致图片验证码与短信验证码接口所需参数不匹配

前阵子我碰到了个需求，实现开户功能

开户需要手机号、图形验证码、短信验证码

如下图：

而图形验证码通过img标签的src属性去请求获取服务器图形验证码图片的

用户如果想要点击获取验证码，就需要提供手机号、图形验证码对应的验证码字符串

问题来了，测试提了个bug，第一次点击获取验证码后端总是报错！

移动端的其他浏览器都很正常，不会出现这个情况，只有qq浏览器会发生这个情况，经过排查，发现qq浏览器第一次打开浏览器，然后访问我们的h5页面时，会连续发送2次获取图形验证码的请求！（这个请求只有后端日志看得到，前端是看不到的，不知道的要去问问后端）

为什么会这样？qq浏览器继承自IE内核，我只能这么大胆的猜测。。。因为就它有问题。

如何解决？

延迟给予img src路径指定，以及延迟执行，不延迟执行的话，还是会报错，因为需要等待内核抽风期过去才能生效（自发多次请求）

componentDidMount = async () => {
    // qq浏览器默认会发送2次img请求 导致图片验证码与获取手机验证码的接口所需参数不一致，因此不能一开始为img标签指定src属性值 而且需要延迟调用 错开qq浏览器内核的初始化时间
    setTimeout(() => {
      this.randomImg.src = `/biz/open-account/captcha?randomString=${this.state.randomTime}`;
    }, 1200);
  };

{!!randomTime && (
   <img
     ref={ref => {
        this.randomImg = ref;
     }}
     className={styles.pic_code}
     src=""
     // src={`/biz/open-account/captcha?randomString=${randomTime}`}
     onClick={this.changeRandomCode}
     alt=""
   />
)}