Vue3+ElementPlus，image动态更新src

y523648

已于 2023-11-27 11:53:17 修改

阅读量1k

点赞数 8

文章标签： vue.js 前端 javascript

于 2023-11-24 17:51:19 首次发布

本文链接：https://blog.csdn.net/y523648/article/details/134603999

版权

我想通过点击图片动态更新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本来就是用于响应基础数据类型的

关注