vue如何動態給img賦值

Posted on by

vue動態給img賦值

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">

vue動態賦值img的src,用require()

首先，單獨一個src是可以的

<img src="../../assets/logo.png" alt="圖片" />

數組是這樣的

想改為動態賦值的形式就實現不瞭

<img :src="item.img" alt="圖片" />

所以改為如下：

在webpack中會將圖片圖片來當做模塊來用，因為是動態加載的，所以url-loader將無法解析圖片地址，將圖片作為模塊加載進去

用require()就可以瞭

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。 

推薦閱讀：