有些業務場景，當用戶多次操作失敗之後會增加圖片驗證碼的操作，那前端該如何處理呢？其實很簡單，後端生成圖片驗證碼，我們直接渲染就可以了，後端可以返回圖片驗證碼的url連結，也可以直接返回圖片檔案，這裡面有個坑，當後端直接返回圖片的時候我們前端如何渲染呢？折騰了一會兒，網上也搜了各種方法多不是很好，其實很簡單，直接把後端圖片驗證碼介面的地址放到img標籤的src裡面，img控制元件會自動獲取並解析資源。

那我們怎麼實現點選圖片圖片驗證碼就會變化呢？後端圖片驗證碼一般是通過一個隨機數來生成的，我們傳的值不同，生成的驗證碼就不同，所以我們可以把含隨機數引數的介面地址放到img src裡面，點選時重新更新下src值就可以了。相關程式碼如下：

//html
<img :src="picUrl" @click="changePicCode">
//js
var picUrl = 'http://www.xxxxxx.xxx/api/pic_code/?t=' +  Math.random().toString();
changePicCode() {
    this.picUrl = 'http:/www.xxxxxx.xxx/api/pic_code/?t=' +  Math.random().toString();
}

程式碼中t的值就是一個隨機數，後端會根據它的值來生成圖片驗證碼。