vue組件屬性中字符串如何拼接變量？

不得不說，對於水平只有jquery的vue初學者來說，vue的圖片加載實現確實挺坑的，在文檔中也沒有看到說明。經過百度之后終於知道了什么情況。

首先：

這樣是沒問題的：

<img src="./../assets/avatar.png" />

但是我把地址提取出來，當道 data 里之后就不行了。

<img :src="logoSrc" >

export default {
  data () {
    return {
      logoSrc: './../assets/avatar.png'
    }
  }
}

這樣會報404錯誤。

　　原因是如果你把相對地址寫在模版里，就是第一種，用webpack打包的時候，會解析地址並打包引用圖片。
而在 js 里寫圖片路徑其實只是字符串 webpack 不會處理
如果想這么做 你可以把圖片放在最外層的 static 文件夾里，當然我不推薦這種做法。
　　還有一種方法就是通過 import require 引入圖片。比如：

http://blog.csdn.net/fairyier/article/details/70847057

　　還有一種情況。后端傳遞過來的圖片是不需要 require 的。如果要顯示，直接在 img 的 src 設置后端返回的地址即可。

用哪種方法就看實際情況吧，圖片少的話用require是蠻不錯的，如果多的話，是不是會很麻煩呢。