vue :src 文件路徑錯誤

首先先說明下vue-cli的assets和static的兩個文件的區別,由於這對你理解後面的解決辦法會有所幫助

 assets在項目編譯的過程當中會被webpack處理解析爲模塊依賴,只支持相對路徑的形式,如< img src=」./logo.png」>和background:url(./logo.png),」./logo.png」是相對資源路徑,將有webpack解析爲模塊依賴 
 static:在這個目錄下文件不會被webpack處理,簡單就是說存放第三方文件的地方,不會被webpack解析。他會直接被複制到最終的打包目錄(默認是dist/static)下。必須使用絕對路徑引用這些文件,這是經過config.js文件中的build.assetsPublic和build.assertsSubDirectory連接來肯定的。任何放在static/中文件須要以絕對路徑的形式引用:/static[filename] 
 根據webpack的特性,總的來講就是static放不會變更的,第三檔的文件,asserts放可能會變更的文件javascript

問題來了,用js動態加載assets或者本文件的圖片出現404的狀態碼

代碼實例vue

<li v-for="(item,index) in images" :key="index">
<img :src="item.src"></li>
//js部分
data(){
  return {
    images:[{src:'./1.png'},{./2.png}]
  }
}

跑起來發現圖片不顯示,錯誤碼爲404, 
 緣由:在webpack中會將圖片圖片來當作模塊來用,由於是動態加載的,因此url-loader將沒法解析圖片地址,而後npm run dev 或者npm run build以後致使路徑沒有被加工【被webpack解析到的路徑都會被解析爲/static/img/[filename].png,完整地址爲localhost:8080/static/img/[filename].png】 
 解決辦法:java

  ①將圖片做爲模塊加載進去,好比images:[{src:require(‘./1.png’)},{src:require(‘./2.png’)}]這樣webpack就能將其解析。webpack

  ②將圖片放到static目錄下,但必須寫成絕對路徑如images:[{src:」/static/1.png」},{src:」/static/2.png」}]這樣圖片也會顯示出來,固然你也能夠經過在webpack.base.config.js定義來縮短路徑的書寫長度。web


固然你說當本地圖片太多時,這樣寫豈不是很麻煩,那麼其實咱們是一這樣簡化操做的。

第一步:在static裏面新建一個json文件夾vue-cli

第二部:填寫json文件,如圖npm

第三部:將json引入響應的vue文件中,解析引用就好了json

相關文章
相關標籤/搜索