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.hqwc.cn/news/236661.html

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

相关文章

揭秘各种编程语言在不同领域中的精彩表现

文章目录 &#x1f50a;博主介绍&#x1f964;本文内容&#x1f4e2;文章总结&#x1f4e5;博主目标 &#x1f50a;博主介绍 &#x1f31f;我是廖志伟&#xff0c;一名Java开发工程师、Java领域优质创作者、CSDN博客专家、51CTO专家博主、阿里云专家博主、清华大学出版社签约作…

【工具使用-Keil】如何在编译之前使用脚本生成文件

一&#xff0c;简介 本文介绍如何在使用keil编译之前生成文件 二&#xff0c;操作步骤 2.1 生成.bat脚本 将下列代码复制到txt中&#xff0c;将VER_PATH中的变量中的"xxx"替换为自己工程中的路径&#xff0c;并将文件后缀名修改为.bat echo offREM #ifndef __VE…

AWS EC2 如何 使用 SSM会话管理器登陆

首先只有特定版本的OS会默认附带SSM Agent。 预安装了 SSM Agent 的 Amazon Machine Images&#xff08;AMIs&#xff09; - AWS Systems Manager 其次EC的instance role必须有一个叫“AmazonSSMManagedInstanceCore”的策略 如何给IAM User赋权&#xff0c;让他们可以使用SSM…

SwiftUI ——扫码

权限配置 在Info.plist文件中配置相机权限 Privacy - Camera Usage Description 创建一个类&#xff0c;实现了AVCaptureMetadataOutputObjectsDelegate 协议&#xff0c;用于处理扫描到的元数据对象&#xff1b;并做权限处理 // // ScannerViewModel.swift // // Created b…

Kaggle-水果图像分类银奖项目 pytorch Densenet GoogleNet ResNet101 VGG19

一些原理文章 卷积神经网络基础&#xff08;卷积&#xff0c;池化&#xff0c;激活&#xff0c;全连接&#xff09; - 知乎 PyTorch 入门与实践&#xff08;六&#xff09;卷积神经网络进阶&#xff08;DenseNet&#xff09;_pytorch conv1x1_Skr.B的博客-CSDN博客GoogLeNet网…

程序员养生之道:延寿不忘初心——延寿必备

文章目录 每日一句正能量前言如何养生饮食篇运动篇休息篇后记 每日一句正能量 现代社会已不是大鱼吃小鱼的年代&#xff0c;而是快鱼吃慢鱼的年代。 前言 在IT行业中&#xff0c;程序员是一个重要的职业群体。由于长时间的繁重编程工作&#xff0c;程序员们常常忽略了身体健康…

Maya 2024(3D建模、动画和渲染软件)

Maya 2024是一款非常强大的3D建模、动画和渲染软件&#xff0c;它提供了许多新功能和改进&#xff0c;以帮助建模师、动画师和渲染师更加高效地进行创作。 在建模方面&#xff0c;Maya 2024引入了Symmetry&#xff08;对称&#xff09;功能&#xff0c;可以在网格两侧生成均匀…

浅析什么是组态图和组态图设计

随着计算机技术和工业自动化水平迅速提高&#xff0c;而车间现场种类繁杂的控制设备和过程监控装置使得传统的工业控制软件无法满足用户的各种需求。在“组态”概念出现之前&#xff0c;工程技术人员需要通过编写程序来实现某一任务&#xff0c;不但工作量大、周期长&#xff0…

鸿蒙保存用户数据 preferences

保存用户数据 ArkTS9 保存用户数据&#xff0c;官方文档写的也比较想详细了&#xff0c;可以参考文档 不过真机运行的时候之前总是有问题&#xff0c;真机跑的当次设置之后再读取没有问题&#xff0c;不过要是在此运行的话&#xff0c;数据就没有了。困扰了好久&#xff0c;…

【opencv】计算机视觉基础知识

目录 前言 1、什么是计算机视觉 2、图片处理基础操作 2.1 图片处理&#xff1a;读入图像 2.2 图片处理&#xff1a;显示图像 2.3 图片处理&#xff1a;图像保存 3、图像处理入门基础 3.1 图像成像原理介绍 3.2 图像分类 3.2.1 二值图像 3.2.2灰度图像 3.2.3彩色图像…

如何应用DAP数据仓库

在当前的信息化建设背景下&#xff0c;企业数据的价值日益凸显&#xff0c;数据分析也越来越受到重视。数据分析通过整合和汇总数据&#xff0c;为企业制定战略、了解市场需求等方面提供强有力的支持。而通过对大量数据进行分析&#xff0c;能够真实、准确、清晰、有效地将企业…

第二证券:大盘震荡蓄势 存量资金博弈

在短期均线约束下&#xff0c;大盘出现轰动分化走势。 11月30日&#xff0c;沪指小幅低开后持续轰动&#xff0c;盘中反弹止步于30日均线&#xff0c;收盘小幅上涨。深成指表现则要弱于沪指&#xff0c;指数受5日均线快速下移约束&#xff0c;毕竟收出阴十字星。截至收盘&…