怎么解決vue:src文件路徑錯誤問題

本文小編為大家詳細介紹“怎么解決vue :src文件路徑錯誤問題”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“怎么解決vue :src文件路徑錯誤問題”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

創(chuàng)新互聯(lián)的客戶來自各行各業(yè)，為了共同目標，我們在工作上密切配合，從創(chuàng)業(yè)型小企業(yè)到企事業(yè)單位，感謝他們對我們的要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。專業(yè)領域包括成都做網(wǎng)站、網(wǎng)站設計、電商網(wǎng)站開發(fā)、微信營銷、系統(tǒng)平臺開發(fā)。

首先先說明下vue-cli的assets和static的兩個文件的區(qū)別，因為這對你理解后面的解決辦法會有所幫助

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]
根據(jù)webpack的特性，總的來說就是static放不會變動的，第三檔的文件，asserts放可能會變動的文件

問題來了，用js動態(tài)加載assets或者本文件的圖片出現(xiàn)404的狀態(tài)碼

代碼實例

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

跑起來發(fā)現(xiàn)圖片不顯示，錯誤碼為404,

原因：在webpack中會將圖片圖片來當做模塊來用，因為是動態(tài)加載的，所以url-loader將無法解析圖片地址，然后npm run dev 或者npm run build之后導致路徑?jīng)]有被加工【被webpack解析到的路徑都會被解析為/static/img/[filename].png，完整地址為localhost:8080/static/img/[filename].png】

　解決辦法：

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

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

當然你說當本地圖片太多時，這樣寫豈不是很麻煩，那么其實我們是一這樣簡化操作的。

第一步：在static里面新建一個json文件夾

第二部：填寫json文件,如圖

第三部：將json引入響應的vue文件中，解析引用就行了

讀到這里，這篇“怎么解決vue :src文件路徑錯誤問題”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內(nèi)容的文章，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

新聞標題：怎么解決vue:src文件路徑錯誤問題
URL網(wǎng)址：http://muchs.cn/article40/pgodho.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、電子商務、網(wǎng)站營銷、自適應網(wǎng)站、響應式網(wǎng)站、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)