解決圖片驗證碼不顯示的問題

template中代碼：

<el-col :span="12">
                    <el-form-item label="圖片驗證碼：" prop="imgCode">
                        <div style="width:100%;height:40px">
                            <el-input v-model="edit.imgCode" type="text" placeholder="請輸入圖片驗證碼" class="yanzhengma_input"
                                      style="position:absolute;left: 0px;top:2px;right:0px; width: 160px; height: 39px; line-height: 39px;width: 190px"
                                      @blur="confirmCode" />
                            <div class="code" style="position:absolute;right:10px;top:4px;width: 118px;height: 40px;" @click="refreshCode">
                                <el-image :src="codeImg" style="padding-right: 13px;padding-top: 3px;"/>
                            </div>
                        </div>
                    </el-form-item>
                </el-col>

refreshCode方法：

methods: {
            refreshCode() {
                getCodeImg().then(res => {
                    if (res.success) {
                        this.codeImg = "data:image/png;base64," + res.data.img;
                        this.edit.imageToken = res.data.imgToken;
                        this.$forceUpdate();
                    }
                })

            },
}

注意：要加上 this.$forceUpdate();強制刷新

另外，還要在created中調用該方法：

created() {
            this.refreshCode()
        },

這樣就可以保證大部分情況下都能顯示圖片二維碼，偶爾也會出現無法顯示的情況。