关于使用vue-cropperjs上传一张图后,再次上传时,裁剪的图片不更新的问题

不更新的原因

它与cropperjs不太一样,vue-cropperjs不是一个实例,当页面首次刷新时它就已经创建,即使后面更改了它的某些数据也不会改变,因为浏览器会对dom组件进行缓存。

解决办法

可以使用v-if来控制它的显示和隐藏,这样每次使用时就会重新创建dom,所以通常搭配弹框使用。只要是可以让它重新创建都可以解决这一问题。

                <VueCropper ref="cropper" :img="previewImage" :src="previewImage" preview=".preview" v-if="showCropper":aspect-ratio="aspectRatio" :view-mode="1" :drag-mode="'move'" class="height100" />
实际操作

关于vue-cropperjs的实际操作可以看我主页的另一篇文章

vue3、element plus 及 vue-cropperjs实现自定义图片尺寸、数量等的公共子组件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/500803.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AWS re:Invent 2024 - Dr. Werner Vogels 主题演讲

今年&#xff0c;我有幸亲临现场参加了所有的 keynote&#xff0c;每一场都让我感受到深深的震撼。无论是全新的功能发布&#xff0c;还是令人眼前一亮的新特性展示&#xff0c;每一场 keynote 都精彩纷呈&#xff0c;充满干货&#xff0c;值得反复学习和回味。 恰好&#xff…

电脑主机后置音频插孔无声?还得Realtek高清晰音频管理器调教

0 缘起 一台联想电脑&#xff0c;使用Windows 10 专业版32位&#xff0c;电脑主机后置音频插孔一直没有声音&#xff0c;所以音箱是接在机箱前面版的前置音频插孔上的。 一天不小心捱到了音箱的音频线&#xff0c;音频线头断在音频插孔里面了&#xff0c;前置音频插孔因此用不…

LinuxC高级day5

作业: 1.思维导图 2.定义一个find函数&#xff0c;查找ubuntu和root的gid并使用变量接收结果 3.定义一个数组&#xff0c;写一个函数完成对数组的冒泡排序 4.使用break求1-100中的质数(质数:只能被1和他本身整除&#xff0c;如:357)

工厂模式与抽象工厂模式在Unity中的实际应用案例

一、实验目的 实践工厂模式和抽象工厂模式的实际应用。 创建一个小型的游戏场景&#xff0c;通过应用这些设计模式提升游戏的趣味性和可扩展性。 掌握在复杂场景中管理和使用不同类型的对象。 比较在实际游戏开发中不同设计模式的实际效果和应用场景。 学习如何进行简单的性…

Zynq PS端外设之GPIO

1. GPIO&#xff08;通用输入/输出&#xff09; GPIO外设有4个Bank&#xff0c;Bank0/1通过MIO连接到PS的引脚上&#xff1b;Bank2/3通过EMIO连接到PL的引脚上。 注意&#xff1a;Bank1的电平要改成LVCOMS 1.8 GPIO寄存器 寄存器&#xff1a; DATA_RO&#xff1a; 读取GPIO的输…

flux中的缓存

1. cache&#xff0c;onBackpressureBuffer。都是缓存。cache可以将hot流的数据缓存起来。onBackpressureBuffer也是缓存&#xff0c;但是当下游消费者的处理速度比上游生产者慢时&#xff0c;上游生产的数据会被暂时存储在缓冲区中&#xff0c;防止丢失。 2. Flux.range 默认…

linux文件类型和根目录结构

1.1 Linux文件类型 1.2 Linux系统的目录结构 1.2.1 FHS filesystem hierarchy standard 文件系统层级标准&#xff0c;定义了在类 Unix 系统中的目录结构和目录内容&#xff0c;即 让用户了解到已安装软件通常放置于哪个目录下。 Linux 目录结构的特点 使用树形目录结构来…

瑞_Linux中部署配置Java服务并设置开机自启动

文章目录 背景Linux服务配置步骤并设置开机自启动附-Linux服务常用指令 &#x1f64a; 前言&#xff1a;由于博主在工作时&#xff0c;需要将服务部署到 Linux 服务器上运行&#xff0c;每次通过指令启动服务非常麻烦&#xff0c;所以将 jar 包部署的服务设置开机自启动&#x…

算法题(23):只出现一次的数字

初级&#xff1a; 审题&#xff1a; 需要输出只出现了一次的数据&#xff0c;其他数据均出现了两次 思路&#xff1a; 若不限制空间复杂度&#xff1a; 方法一&#xff1a;哈希表 用哈希映射循环一次&#xff0c;把对应数字出现的次数记录到数组里面&#xff0c;然后再遍历一次…

STM32拓展 低功耗案例1:睡眠模式 (register)

需求描述 让MCU进入睡眠模式&#xff0c;然后通过串口发送消息来唤醒MCU退出睡眠模式。观察LED在进入休眠模式后是否仍然开启。 思考 首先睡眠模式&#xff0c;唤醒的条件是中断&#xff0c;外部内部都可以&#xff0c;这里的串口接收中断时内部中断。 拓展&#xff1a;中断…

CSS 学习之 padding 与图形绘制

padding 属性和 background-clip 属性配合&#xff0c;可以在有限的标签下实现一些 CSS 图形绘制效果&#xff0c;我这里举两个小例子&#xff0c;重在展示可行性。 例 1:不使用伪元素&#xff0c;仅一层标签实现大队长的“三道杠”分类图标效果。此效果在移动端比较常见&…

机器学习 学习知识点

机器学习 学习知识点 什么是消融实验&#xff08;Ablation experiment&#xff09;&#xff1f;num_step与batch_size的区别python glob.glob()函数认识python的条件判断之is not、is not None、is Nonetqdm介绍及常用方法softmax 激活函数。type_as(tesnor)Python OpenCV cv2.…

【网络安全 | 漏洞挖掘】硬编码凭据泄露实现支付系统账户接管

未经许可,不得转载。 文章目录 前言在APK中寻找硬编码凭据+账户接管在APP流程中寻找硬编码凭据+账户接管总结前言 硬编码凭据是指直接嵌入应用程序源代码中的敏感信息,例如 API 密钥、密钥、用户名或密码。这些凭据通常为了开发便捷而添加,但往往在发布到生产代码或应用路径…

【数据库系列】Spring Boot 中整合 MyBatis-Plus详细步骤

在 Spring Boot 中整合 MyBatis-Plus 可以按照以下步骤进行&#xff1a; 一、整合步骤 1. 创建 Spring Boot 项目 首先&#xff0c;使用 Spring Initializr&#xff08;https://start.spring.io/&#xff09;创建一个新的 Spring Boot 项目。在创建过程中&#xff0c;选择以…

JVM实战—8.如何分析jstat统计来定位GC

大纲 1.使用jstat了解线上系统的JVM运行状况 2.使用jmap和jhat了解线上系统的对象分布 3.如何分析JVM运行状况并合理优化 4.使用jstat分析模拟的BI系统JVM运行情况 5.使用jstat分析模拟的计算系统JVM运行情况 6.问题汇总 1.使用jstat了解线上系统的JVM运行状况 (1)JVM的…

[人工智能] 结合最新技术:Transformer、CLIP与边缘计算在提高人脸识别准确率中的应用

随着人工智能的快速发展&#xff0c;特别是深度学习和自然语言处理领域的革命性技术&#xff0c;越来越多的前沿技术被应用于人脸识别中。Transformer架构、CLIP模型以及边缘计算的结合&#xff0c;正成为提升人脸识别准确率和应用效能的关键技术路径。特别是在多样化场景下&am…

DataV数据可视化

阿里云 DataV 是一个强大的数据可视化工具&#xff0c;可以帮助用户通过创建丰富的图表、仪表盘、地图和互动视图&#xff0c;将复杂的数据转化为易于理解和分析的可视化信息。DataV主要用于大数据和实时数据的展示&#xff0c;可以帮助企业和个人更直观地理解数据背后的含义&a…

【国产NI替代】基于STM32+FPGA的8振动+4温度(16bits)数据采集板卡解决方案,支持全国产

一、8振动4温度&#xff08;16bits&#xff09;数据采集板卡解决方案 采用STM32H743做为主控芯片&#xff0c;针对工业现场 环境设计的12通道数据采集装置&#xff0c;采集器模 拟信号调理电路采用模块化设计&#xff0c;前通道模 块可配置&#xff0c;可扩展&#xff0c;其…

SpringMVC(一)配置

目录 引入 第一章&#xff1a;Java web的发展历史 一、Model I和Model II 1.Model I开发模式 2.Model II开发模式 二. MVC模式 第二章&#xff1a;SpringMVC的入门案例 搭建SpringMVC的入门程序 1.创建新项目 2.等待加载导入坐标 3.处理xml文件和其他 导入tomcat 运…

数据结构(ing)

学习内容 指针 指针的定义&#xff1a; 指针是一种变量&#xff0c;它的值为另一个变量的地址&#xff0c;即内存地址。 指针在内存中也是要占据位置的。 指针类型&#xff1a; 指针的值用来存储内存地址&#xff0c;指针的类型表示该地址所指向的数据类型并告诉编译器如何解…