有三種解決辦法：

1、在模板中直接引入圖片資源（如果圖片比較多的話，會比較麻煩）

2、將圖片資源放在static資料夾下

3、圖片資源在assets資料夾下，data中必須用require載入，否則會當成字串來處理

第二種，只要給圖片放在static資料夾下即可：原因如下

由於元件化問題，webpake在打包以後，src目錄下的assets裡面存放的img圖片，路徑已經更換。如下圖所示

這裡在使用vue-cli腳手腳構建工具，目錄下會生成一個static目錄，表示的是靜態目錄，推薦大家將img 存放在這個目錄下，那麼在webpack編譯以後，依舊是可以獲取到這個目錄下的路徑，這樣就解決了路徑不符而導致圖片載入不出來的問題！當然專案中用的一般都是絕對路徑，少數圖片的話，這種方式挺好

第三種用法如下所示：

使用：

 data(){
          return {
            pic:require("../../assets/imgs/ad_1.jpg")
          
      }
//html模板中使用
<span><img :src="pic"/></span>

//如果是多張圖片，存放在陣列中

 data(){
          return {
            picArr:[
              require("../../assets/imgs/ad_1.jpg"),
              require("../../assets/imgs/ad_2.jpg"),
              require("../../assets/imgs/ad_3.jpg"),
              require("../../assets/imgs/ad_4.jpg"),
              require("../../assets/imgs/ad_5.jpg")
            ]
          }
      }

//html模板中使用
<span v-for="item in picArr"><img :src="item"/></span>