Vue3+ElementPlus,image动态更新src

我想通过点击图片动态更新src,代码如下:

<el-image style="width: 100px; height: 30px" :src="ImageUrl" @click="refresh" :fit="fit" />
const ImageUrl = reactive('http://localhost:9001/getImage')const refresh = ()=>{ImageUrl = 'http://localhost:9001/getImage' + Math.random()
}

却发生了错误:

修改为target.src,解决问题

<el-image style="width: 100px; height: 30px" :src="ImageUrl" @click="refresh($event)" :fit="fit" />
​
const refresh = (e)=>{e.target.src="http://localhost:9001/getImage?id=" + Math.random()
}​

不知道为什么不能直接修改ImageUrl。

注:后来发现是reactive写法错误了,reactive是响应对象的,需要ley/value对象形式,或者修改为ref()就能直接修改了,因为url地址是字符串,而ref本来就是用于响应基础数据类型的

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

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

相关文章

20个Python源码项目下载

20个很不错的Python项目源码&#xff0c;其中包括适合毕业设计的项目。这些资源中涵盖了Django 3版本的项目&#xff1a; DjangoMysqlBulma实现的商场管理系统源码 PythonDjango实现基于人脸识别的门禁管理系统 PythonFlaskMySQL实现的学生培养计划管理系统 Python大熊猫主题人…

使用yolov7进行多图像视频识别

1.yolov7你可以让你简单的部署,比起前几代来说特别简单 #下面是我转换老友记的测试视频,可以看到几乎可以准确预测 2.步骤 1.在github官网下载代码 https://github.com/WongKinYiu/yolov7 2.点击下载权重文件放到项目中 3.安装依赖,我的python版本是3.6的 pip install -r requ…

深度解析 Dockerfile:构建可重复、可扩展的Docker镜像

文章目录 什么是Dockerfile&#xff1f;Dockerfile的基本结构常用Dockerfile指令解析1. FROM2. LABEL3. WORKDIR4. COPY5. RUN6. EXPOSE7. ENV8. CMD 构建可重复、可扩展的Docker镜像1. 指定基础镜像的版本2. 合理使用缓存3. 精简镜像4. 使用多阶段构建 总结 &#x1f388;个人…

【分享】centos7vim异常

问题描述: 虚拟机安装centos7&#xff0c;安装vim后异常&#xff0c;上下左右键会变成abcd,退格键无法删除。 系统版本: CentOS Linux release 7.5.1804 (Core) 原因: 暂时未知&#xff0c;有可能是vim安装时&#xff0c;一个组件未安装导致。后续追溯 解决方案: echo &quo…

血的教训---入侵redis并免密登录redis所在服务器漏洞复现

血的教训—入侵redis并免密登录redis所在服务器漏洞复现 今天就跟着我一起来入侵redis并免密登录redis所在服务器吧&#xff0c;废话不多说&#xff0c;我们直接开始吧。 这是一个体系的学习步骤&#xff0c;当然如果基础扎实的话可以继续往下面看 以下都是关联的文章&#xff…

Unity3D 导出的apk进行混淆加固、保护与优化原理(防止反编译)

Unity3D 导出的apk进行混淆加固、保护与优化原理&#xff08;防止反编译&#xff09; 目录 前言&#xff1a; 准备资料&#xff1a; 正文&#xff1a; 1&#xff1a;打包一个带有签名的apk 2&#xff1a;对包进行反编译 3&#xff1a;使用ipaguard来对程序进行加固 前言&…

C++ 学习之匿名名字空间的使用细节

匿名命名空间&#xff08;anonymous namespace&#xff09;是C中的一种特殊命名空间&#xff0c;它没有显式的名称。匿名命名空间可以用来定义仅在当前文件中可见的全局变量、函数和类。 由于没有名字&#xff0c;所以相当于直接引入&#xff0c;但是没有引入定义 如果发生冲…

Echarts 柱状图添加标记 最大值 最小值 平均值

标记 最大值 最小值 series: [//图表配置项 如大小&#xff0c;图表类型{name: 图例,type: bar,//图表类型data: [{value: 500,time: 2012-11-12},{value: 454,time: 2020-5-17},{value: 544,time: 2022-1-22},{value: 877,time: 2013-1-30}, {value: 877,time: 2012-11-12}] …

AS 之 gradle 命令

文章目录 1、命令大全2、编译命令2.1 检查依赖并编译打包2.2 编译并打 Debug 包2.3 编译打出 Debug 包并安装2.4 编译并打出 Release 包2.5 编译打出 Release 包并安装2.6 Debug/Release 编译并打印日志 3、清除命令4、卸载命令4.1 卸载 Debug/Release 安装包4.2 adb 卸载 5、调…

【linux网络】补充网关服务器搭建,综合应用SNAT、DNAT转换,dhcp分配、dns分离解析,nfs网络共享以及ssh免密登录

目录 linux网络的综合应用 1&#xff09;网关服务器&#xff1a;ens35&#xff1a;12.0.0.254/24&#xff0c;ens33&#xff1a;192.168.100.254/24&#xff1b;Server1&#xff1a;192.168.100.101/24&#xff1b;PC1和server2&#xff1a;自动获取IP&#xff1b;交换机无需…

Ubuntu 20.04 for NVIDIA V100 GPU安装手册

安装Ubuntu 20.04.3 LTS版本 image.png 安装Ubuntu 20.04按照安装提示&#xff0c;仔细选择每一项&#xff0c;基本默认即可。 系统中查看GPU信息 系统安装完成之后&#xff0c;进入系统&#xff0c;使用lspci 命令查询一下GPU是否存在、型号信息是什么。 bpangbobpang:\~$…

【Centos8】下载 MySQL8 并开启远程连接

本文将记录一下 centos8 下载 mysql8 的安装命令&#xff0c;防止下一次安装的时候还需要查询相关资料。&#x1f923; 下载 mysql # 查看是否有 mysql&#xff0c;如果有则需要卸载 yum list installed mysql |grep mysql # or rpm -qa |grep mysql# 查看是否有 mysql 残余文…

传统算法:使用 Pygame 实现插入排序

使用 Pygame 模块实现了插入排序的动画演示。首先,它生成一个包含随机整数的数组,并通过 Pygame 在屏幕上绘制这个数组的条形图。接着,通过插入排序算法对数组进行排序,动画效果可视化每一步的排序过程。在排序的过程中,程序将当前元素插入到已排序的部分,通过适度的延迟…

plt绘制表格

目录 1、绘制简单表格 2、将字体居中 3、为每个表格添加背景 4、添加透明度 5、不显示表格标题 6、将pandas的表格列转行显示 7、关闭表格边框 8、设置表格长宽、字体大小 9、利用色系指定表格颜色 10、修改字体颜色、边框粗细 1、绘制简单表格 import pandas as pd…

在gitlab上使用server_hooks

文章目录 1. 前置条件2. Git Hook2.1 Git Hook 分为两部分&#xff1a;本地和远程2.1.1 本地 Git Hook&#xff0c;由提交和合并等操作触发&#xff1a;2.1.2 远程 Git Hook&#xff0c;运行在网络操作上&#xff0c;例如接收推送的提交&#xff1a; 3. 操作步骤3.1 对所有的仓…

JAVA全栈开发 day14_集合(Collection\List接口、数据结构、泛型)

一、数组 数组是一个容器&#xff0c;可以存入相同类型的多个数据元素。 数组局限性&#xff1a; ​ 长度固定&#xff1a;&#xff08;添加–扩容&#xff0c; 删除-缩容&#xff09; ​ 类型是一致的 对象数组 &#xff1a; int[] arr new int[5]; … Student[] arr …

四、虚拟机网络配置

目录 1、VMware网卡配置模式 1.1 桥接模式 ​​​​​​​1.2 NAT模式 ​​​​​​​1.3 仅主机模式 ​​​​​​​2、编辑虚拟机的网络编辑器 ​​​​​​​3、编辑Window的虚拟网卡 ​​​​​​​4、修改IP地址为静态 4.1 查看网卡名字 4.2 编辑修改网卡IP地址的…

Vue中的组件和插件

一、组件 组件是Vue中最核心的概念之一&#xff0c;它可以把一个页面拆分成多个独立的、可复用的部分。组件通常包含了自己的模板、样式和逻辑&#xff0c;用于封装一个特定的功能或界面。Vue的组件有单文件组件和普通组件两种类型&#xff0c;可以通过Vue.component或Vue.ext…

【多线程】-- 07 线程礼让与线程强制执行

多线程 5 线程状态 5.3 线程礼让 Thread.yield()礼让线程&#xff0c;让当前正在执行的线程暂停&#xff0c;但不阻塞将线程从运行状态转为就绪状态让CPU重新调度&#xff0c;礼让不一定成功&#xff01;由CPU调度决定。 package com.duo.state;//测试礼让线程 public clas…

【2023CANN训练营第二季】——Ascend C算子调用及实验演示

自定义算子调用方式 完成自定义算子的开发部署后&#xff0c;可以通过单算子调用的方式来验证单算子的功能。单算子调用有API执行和模型执行两种方式&#xff1a; 单算子API执行&#xff1a;基于C语言的API执行算子&#xff0c;无需提供单算子描述文件进行离线模型的转换&…