在使用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電腦刺綉綉花廠 http://www.szhdn.com 廣州品牌設計公司https://www.houdianzi.com
二、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 } } }