vue報錯找不到圖片怎麼辦

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

本教學操作環境：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處理解析為模組依賴，只支援相對路徑的形式，如a6f88eaad3fd08d2d0724bf21b45e7c8和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.js影片教學》

以上是vue報錯找不到圖片怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章！