Vue 怎么动态改变 image 内容

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 1081 天前的主题，其中的信息可能已经有所发展或是发生改变。

<img :src="b64img1"/>

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

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

14 条回复 • 2021-05-04 20:31:49 +08:00

temporary

2021-05-03 23:19:34 +08:00 via iPhone

Kasumi20

2021-05-03 23:20:50 +08:00

为什么不会变？不分析以下原因吗？

wunonglin

2021-05-03 23:22:55 +08:00

请提供复现示例

emeab

2021-05-03 23:51:40 +08:00

```
Vue.set(this, "b64img1", this.b64img2)
```

line

2021-05-04 00:36:00 +08:00

想用 playgroud 复现没有成功，最后用 canvas 解决了。 😂😂，多谢各位答疑。

towry

2021-05-04 00:44:36 +08:00

神一样的解决办法

tinyuu

2021-05-04 05:59:23 +08:00 via iPhone

这么复杂吗？哈哈哈

gouflv

2021-05-04 07:03:20 +08:00 via iPhone

vue 是真的不错，总是能开出很多脑洞

lichdkimba

2021-05-04 07:08:17 +08:00

我试了下可以啊

为啥有两个变量不是直接 this.b64img1 = 'xxx' 吗

Rrrrrr

2021-05-04 09:31:49 +08:00

哈哈，笑了

err1y

2021-05-04 10:34:07 +08:00 via iPhone

watch 变量，数据变化后 this.$forceUpdate()试试

lybcyd

2021-05-04 10:44:12 +08:00

https://codesandbox.io/s/priceless-heisenberg-mqzrr?file=/index.html
试了一下是完全正常的，你能贴出完整一点的代码吗？

fpure

2021-05-04 11:18:07 +08:00

你需要给出完整代码

GzhiYi

2021-05-04 20:31:49 +08:00

给 img 加 key 可解。