V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
line
V2EX  ›  Vue.js

Vue 怎么动态改变 image 内容

  •  
  •   line ·
    linexjlin · 2021-05-03 22:58:17 +08:00 · 2733 次点击
    这是一个创建于 1284 天前的主题,其中的信息可能已经有所发展或是发生改变。
    <img :src="b64img1"/>
    
    data () {
        return {
         b64img1: '',
         b64img2: ''
        }
     }
    

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

    14 条回复    2021-05-04 20:31:49 +08:00
    temporary
        1
    temporary  
       2021-05-03 23:19:34 +08:00 via iPhone
    <img :key="b64img1" :src="b64img1" />
    Kasumi20
        2
    Kasumi20  
       2021-05-03 23:20:50 +08:00
    为什么不会变?不分析以下原因吗?
    wunonglin
        3
    wunonglin  
       2021-05-03 23:22:55 +08:00
    请提供复现示例
    2kCS5c0b0ITXE5k2
        4
    2kCS5c0b0ITXE5k2  
       2021-05-03 23:51:40 +08:00
    ```
    Vue.set(this, "b64img1", this.b64img2)
    ```
    line
        5
    line  
    OP
       2021-05-04 00:36:00 +08:00
    想用 playgroud 复现没有成功, 最后用 canvas 解决了。 😂😂, 多谢各位答疑。
    towry
        6
    towry  
       2021-05-04 00:44:36 +08:00
    神一样的解决办法
    tinyuu
        7
    tinyuu  
       2021-05-04 05:59:23 +08:00 via iPhone
    这么复杂吗? 哈哈哈
    gouflv
        8
    gouflv  
       2021-05-04 07:03:20 +08:00 via iPhone
    vue 是真的不错,总是能开出很多脑洞
    lichdkimba
        9
    lichdkimba  
       2021-05-04 07:08:17 +08:00
    我试了下可以啊

    为啥有两个变量 不是直接 this.b64img1 = 'xxx' 吗
    Rrrrrr
        10
    Rrrrrr  
       2021-05-04 09:31:49 +08:00
    哈哈,笑了
    err1y
        11
    err1y  
       2021-05-04 10:34:07 +08:00 via iPhone
    watch 变量,数据变化后 this.$forceUpdate()试试
    lybcyd
        12
    lybcyd  
       2021-05-04 10:44:12 +08:00
    https://codesandbox.io/s/priceless-heisenberg-mqzrr?file=/index.html
    试了一下是完全正常的,你能贴出完整一点的代码吗?
    fpure
        13
    fpure  
       2021-05-04 11:18:07 +08:00
    你需要给出完整代码
    GzhiYi
        14
    GzhiYi  
       2021-05-04 20:31:49 +08:00
    给 img 加 key 可解。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2747 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 11:45 · PVG 19:45 · LAX 03:45 · JFK 06:45
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.