Vue 怎么动态改变 image 内容

2021 年 5 月 3 日
 line
<img :src="b64img1"/>

data () {
    return {
     b64img1: '',
     b64img2: ''
    }
 }

这里 b64img1 的值变了, 图不会跟着变。 有什么 办法吗?

3778 次点击
所在节点    Vue.js
14 条回复
temporary
2021 年 5 月 3 日
<img :key="b64img1" :src="b64img1" />
Kasumi20
2021 年 5 月 3 日
为什么不会变?不分析以下原因吗?
shakaraka
2021 年 5 月 3 日
请提供复现示例
2kCS5c0b0ITXE5k2
2021 年 5 月 3 日
```
Vue.set(this, "b64img1", this.b64img2)
```
line
2021 年 5 月 4 日
想用 playgroud 复现没有成功, 最后用 canvas 解决了。 😂😂, 多谢各位答疑。
towry
2021 年 5 月 4 日
神一样的解决办法
tinyuu
2021 年 5 月 4 日
这么复杂吗? 哈哈哈
gouflv
2021 年 5 月 4 日
vue 是真的不错,总是能开出很多脑洞
lichdkimba
2021 年 5 月 4 日
我试了下可以啊

为啥有两个变量 不是直接 this.b64img1 = 'xxx' 吗
Rrrrrr
2021 年 5 月 4 日
哈哈,笑了
err1y
2021 年 5 月 4 日
watch 变量,数据变化后 this.$forceUpdate()试试
lybcyd
2021 年 5 月 4 日
https://codesandbox.io/s/priceless-heisenberg-mqzrr?file=/index.html
试了一下是完全正常的,你能贴出完整一点的代码吗?
fpure
2021 年 5 月 4 日
你需要给出完整代码
GzhiYi
2021 年 5 月 4 日
给 img 加 key 可解。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/774786

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX