vue:動態給img賦值

少年郎啊少年郎發表於2020-10-10

1、如果直接給img的src繫結一個字串

<img :src=nowIcon />
 data () {
    return {
      nowIcon: ''
    }
  },
  
this.nowIcon = '../assets/64/' + 圖片名 + '.png'

vue會將這個路徑當成字串,不會給這個圖片路徑編譯,圖片顯示不出來

此時的路徑是未經過編譯的,程式碼為:

<img src='../assets/64/100.png' />	

2、解決辦法

this.nowIcon = '../assets/64/' + 圖片名 + '.png'
改為
this.nowIcon = require('../assets/64/' + 圖片名 + '.png')

此時的程式碼是正常編譯後的路徑,圖片正常顯示

<img src="/img/101.ce5f2cfc.png">

相關文章