vue報錯找不到圖片怎麼辦

vue報錯找不到圖片的解決辦法：1、修改組態檔，將絕對路徑改為相對路徑；2、將圖片作為模組載入進去，並將圖片放到static目錄下；3、將imageUrls引入響應的vue檔案中，解析參照即可。

前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

本教學操作環境：windows7系統、vue3、Dell G3電腦。

vue報錯找不到圖片怎麼辦？

vue中圖片載入不出來的問題及解決

在使用vue開發專案的時候，經常會遇到的一個問題就是：圖片載入不出來。下面是我總結的幾種圖片載入不出來的情況及解決辦法。

一、專案打包完成後，開啟整體空白

1、路徑問題

原因

在vue+webpack的專案中，專案打包之後的css和js的參照路徑是絕對路徑，專案部署之後會將靜態當成根目錄，就造成了檔案參照路徑的錯誤。

解決辦法

通過修改組態檔，將絕對路徑改為相對路徑。

具體操作如下：

1.vue-cli 3.0版本之前

設定config下面的index.js中bulid模組匯出的路徑。因為index.html裡邊的內容都是通過script標籤引入的，而你的路徑不對，開啟肯定是空白的。先看一下預設的路徑。

module.exports = {
 build: {
 env: require('./prod.env'),
 index: path.resolve(__dirname, '../dist/index.html'),
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 productionSourceMap: true,

assetsPublicPath預設的是 ‘/' 也就是根目錄。而我們的index.html和static在同一級目錄下面。 所以要改為 ‘./ '

2.vue-cli 3.0版本之後

設定vue.config.js檔案

module.exports = {
  // baseUrl:'./', // vue-cli3.3以下版本使用
  publicPath:'./' // vue-cli3.3+新版本使用

2、vue-router的history模式打包後介面空白

src裡邊router/index.js路由設定裡邊預設模式是hash，如果你改成了history模式的話，開啟也會是一片空白。所以改為hash或者直接把模式設定刪除，讓它預設的就行 。

如果非要使用history模式的話，需要你在伺服器端加一個覆蓋所有的情況的候選資源：如果URL匹配不到任何靜態資源，則應該返回一個index.html,這個頁面就是你app依賴頁面。

// mode: 'history' 
// 預設hash

二、assets目錄下圖片載入不出來

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放可能會變動的檔案

原因

在webpack中會將圖片圖片來當做模組來用，因為是動態載入的，所以url-loader將無法解析圖片地址，然後npm run dev 或者npm run build之後導致路徑沒有被加工【被webpack解析到的路徑都會被解析為/static/img/[filename].png，完整地址為localhost:8080/static/img/[filename].png】

解決辦法

1.將圖片作為模組載入進去

比如 images:[{src:require(‘./1.png’)},{src:require(‘./2.png’)}]，這樣webpack就能將其解析。

2.將圖片放到static目錄下

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

簡化本地圖片載入的方法

1.在static裡面新建一個imageUrls資料夾

2.填寫imageUrls檔案

{
  'imageUrls': [
    {
      'image1': '/static/image/image1.png'
    },
    {
      'image2': '/static/image/image2.png'
    }
  ]
}

3.將imageUrls引入響應的vue檔案中，解析參照就行了

import img from '../../../static/imageUrls/imageUrls.json'
export default {
  data() {
    return {
      imageGroups: img.imageUrls
    }
  }
}

推薦學習：《》

以上就是vue報錯找不到圖片怎麼辦的詳細內容，更多請關注TW511.COM其它相關文章！