line
V2EX  ›  Vue.js

Vue 怎么动态改变 image 内容

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

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