line
V2EX  ›  Vue.js

Vue 怎么动态改变 image 内容

  •  
  •   line ·
    linexjlin · May 3, 2021 · 3508 views
    This topic created in 1860 days ago, the information mentioned may be changed or developed.
    <img :src="b64img1"/>
    
    data () {
        return {
         b64img1: '',
         b64img2: ''
        }
     }
    

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

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

    为啥有两个变量 不是直接 this.b64img1 = 'xxx' 吗
    Rrrrrr
        10
    Rrrrrr  
       May 4, 2021
    哈哈,笑了
    err1y
        11
    err1y  
       May 4, 2021 via iPhone
    watch 变量,数据变化后 this.$forceUpdate()试试
    lybcyd
        12
    lybcyd  
       May 4, 2021
    https://codesandbox.io/s/priceless-heisenberg-mqzrr?file=/index.html
    试了一下是完全正常的,你能贴出完整一点的代码吗?
    fpure
        13
    fpure  
       May 4, 2021
    你需要给出完整代码
    GzhiYi
        14
    GzhiYi  
       May 4, 2021
    给 img 加 key 可解。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   1138 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 55ms · UTC 18:05 · PVG 02:05 · LAX 11:05 · JFK 14:05
    ♥ Do have faith in what you're doing.