zoukankan      html  css  js  c++  java
  • 解决图片验证码不显示的问题

    template中代码:

    <el-col :span="12">
                        <el-form-item label="图片验证码:" prop="imgCode">
                            <div style="100%;height:40px">
                                <el-input v-model="edit.imgCode" type="text" placeholder="请输入图片验证码" class="yanzhengma_input"
                                          style="position:absolute;left: 0px;top:2px;right:0px;  160px; height: 39px; line-height: 39px; 190px"
                                          @blur="confirmCode" />
                                <div class="code" style="position:absolute;right:10px;top:4px; 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()
            },

    这样就可以保证大部分情况下都能显示图片二维码,偶尔也会出现无法显示的情况。

  • 相关阅读:
    Python_Note_08Day 9_HTML
    Python_Note_08Day 6_Bastion Host_Paramiko_SSH
    Python_Note_08Day 5_Module
    Python_Note_Day 11_Mysql02_Python MySQL API
    Python_Note_Day 11_Mysql
    Python_Data_Analysis_01
    485. Max Consecutive Ones
    498. Diagonal Traverse
    500. Keyboard Row
    481. Magical String
  • 原文地址:https://www.cnblogs.com/zwh0910/p/15088992.html
Copyright © 2011-2022 走看看