关于element ui的图片标签＜el-image＞ 验证码会提交两次的bug

最新推荐文章于 2022-12-03 16:36:33 发布
最新推荐文章于 2022-12-03 16:36:33 发布
阅读量1.9k 收藏 1
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hida_Baru/article/details/109724168
版权

最近在做一个点击图片会刷新验证码的例子，
前端点击图片触发getCaptch（）将图片的src属性更改
在这里插入图片描述
在这里插入图片描述

但是但我点击的时候发现了
后端输出了两句日志，

在这里插入图片描述

在这里插入图片描述

也就是说前端向后端发了两次请求，后来发现将elementUI的<el-image>标签换成<img> 标签就行了，可能是<el-image> 的bug。
在这里插入图片描述

Hida_Baru
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
Element-UI升级后，el-table不显示 空白问题 备份包 资源备份
10-26
Element-UI升级后，el-table不显示 空白问题 备份包
详解elementui之el-image-viewer(图片查看器)
10-16
主要介绍了详解elementui之el-image-viewer(图片查看器)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue+elementUi自定义select标签样式、图标、左侧、右侧、插槽、背景图片、大小、select、option、/deep/、::v-deep、position、absolute
“代码农”微信公众号
04-28 3118
目录1、HTML2、JavaScript3、css4、相关链接 1、HTML <template> <div id="app"> <el-select class="selsect_box" v-model="value" placeholder="请选择" @change="changeSelectOption" > <!-- 自定义左侧图标 --> <tem
在element-ui表格中动态展示图片 动态展示标签
nongcunqq的博客
08-05 1865
<el-table-column prop="" label="机构图片" width="80"> <!--加入下面的内容,scope.row代表这一行,headUrl是显示这一行的哪个字段,我的是headUrl,你的自己看下--> <template slot-scope="scope"> <img :src="scope.row.headUrl" alt="" width="60px".
<img>标签导致请求发送两次问题
Frankenstein的博客
10-25 4311
本文介绍了img标签导致请求发送两次，造成前后台sessionid不一致的问题
element里面的el-image感觉有bug
Monster_Lukas的博客
06-08 1070
今天碰到了一个问题，table表格中的图片，会请求两次
从后台获取图片流（验证码）加载多次问题
twinkle的博客
11-17 1688
如果是像我这样引用二维码，每一次点击都会加载两次的话，那就是一下的问题造成的： 其实说起来也简单，就是用了el-image这个标签，自己想偷个懒，仅此而已。 如果使用el-image作为来显示图片标签的话，那就会加载两次，一开始我还以为是先请求一次看后台是否响应，然后再请求一次呢，结果发现大跌眼镜。 解决方法： 把el-img改成普通的image就可以了，结果如下： 欢迎讨论为啥会加载两次...
vue下个人实现拼图验证码
海天酱油zz
09-11 6928
缘由：之前看哔哩哔哩官网登录的时候有一个拼图验证码，很好奇怎么去实现。然后就想着自己弄一个。先给大家看我的最终效果。后面再一点点拆解代码。 为什么想着写这个功能呢，主要在于拼图验证码在前端这里会比较复杂并且深入。相比文字拼写，12306的图片验证码都没有拼图验证码对前端的要求来的复杂，和难。 我总结下知识点： 1、弹窗功能 2、弹窗基于元素定位 3、元素拖动 4、canvas绘图 ...
elementui 使用el-image 控件 解决 通过点击查看按钮两次才能 实现预览图片
一株木樨的博客
04-21 8143
需求：点击查看按钮，将图片显示出来。 问题：查看按钮必须触发两次才会将图片显示出来 前端效果： 点击查看按钮，弹出来图片 图片展示： 解决方法有两种： 第一种 调用Image 的源码中的image-viewer里面的方法，然后生成预览图片的框，然后通过查看按钮 将预览图片的数据拿到，再调用image-viewer中的clickHandler方法，该方法会将image-viewer中的是否显示的标识置为ture,这样就可以显示了。 image-viewer中 image-viewer中的loadImag
vue3.2+ts+element-plus 实现登陆界面验证码
jingruoannan的博客
12-03 2236
vue3.2+ts+element-plus 实现登陆界面验证码
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
主要介绍了vue-cli3.0+element-ui上传组件el-upload的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
主要介绍了Vue + Element-ui的下拉框el-select获取额外参数详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Element-ui el-image图片时而加载失败时而加载成功
HackerAC的博客
10-20 3219
Element-ui el-image图片时而加载失败时而加载成功的解决建议
JavaScript： 解决了＜el-image＞频繁加载图片出现白色边框问题
weitaming1的博客
03-29 1781
问题描述 当频繁加载图片并渲染的时候，出现加载渲染图片的控件在两张图片切换的过程中出现白色闪烁的问题。 问题排查 查看源代码后，发现html中用 元素来显示图片的。 并且通过改变：src="jpgPath"的值来替换图片。 解决方法： 临时解决方法： 用canvas 绘制图片的方式来代替 。 新问题： 1. canvas 直接不断的绘制image,会出现闪屏的问题。 解决方法：使用双缓存解决 Canvas clearRect 引起的闪屏问题 : 使用双缓存解决问题 updateCanvas(){
vue系列：Vue+elementUI点击图片预览＜el-image＞标签的使用（一）
weixin_42169734的博客
08-12 2971
参考element官方文档案例：https://element.eleme.cn/#/zh-CN/component/installation <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-c
element-ui—— el-upload 自定义上传文件显示列表及固定标签的添加
qq_43201350的博客
05-09 4815
<template> <div> <el-upload class="avatar-uploader" ref="upload" :limit="10" multiple :on-exceed="handleExceed" :show-file-list="false" action="https://jsonplaceholder.typicode.com/posts/" :on-change="handlePreview" :file-l
element-ui组件el-image预览功能关闭后无法从头开始
LzzMandy的博客
07-30 1118
RUGUO element-ui 组件el-image预览功能，预览关闭后，再次打开时，记录了上次预览的顺序， 复现步骤： 有4张图分别是 A B C D，点击B图，预览右箭头操作B->C->D，关闭，点击B，此时看到的图片是D，我们需求是看到B 原因： 关闭时，没有把index置为0 解决： 1、修改node_modules/element-ui/packages/image/src/image-viewer.vue的hide方法，index=0，发现没效果 2、修改的位置不..
实验-三、数据库安全性(目的、要求和模板).doc
最新发布
04-24
实验-三、数据库安全性(目的、要求和模板).doc
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!--引入 element-ui 的样式，--> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 必须先引入vue， 后使用element-ui --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> <!-- 引入element 的组件库--> <script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body> <div id="app"> <el-row> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> </el-row> </div> </body> </html>为什么没样式
07-10
您的代码中引入了Element UI的样式文件和组件库，但是没有使用Vue实例来渲染页面。Element UI是基于Vue的组件库，需要结合Vue来使用。 您可以在Vue实例中添加el属性，并将其指向一个DOM元素，例如`<div id="app">`，然后在Vue实例中引入Element UI的组件，这样才能正确地渲染样式。 以下是修复后的代码示例： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 引入 element-ui 的样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 必须先引入vue，再使用element-ui --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> <!-- 引入element的组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body> <div id="app"> <el-row> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> </el-row> </div> <script> new Vue({ el: '#app', }); </script> </body> </html> ``` 通过将代码放入Vue实例中，可以正确地渲染Element UI的样式和组件，以及绑定相应的事件和逻辑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值