在使用vue開發(fā)項(xiàng)目的時(shí)候，經(jīng)常會(huì)遇到的一個(gè)問題就是：圖片加載不出來(lái)。下面是我總結(jié)的幾種圖片加載不出來(lái)的情況及解決辦法。

一、項(xiàng)目打包完成后，打開整體空白

1、路徑問題

原因

在vue+webpack的項(xiàng)目中，項(xiàng)目打包之后的css和js的引用路徑是絕對(duì)路徑，項(xiàng)目部署之后會(huì)將靜態(tài)當(dāng)成根目錄，就造成了文件引用路徑的錯(cuò)誤。

解決辦法

通過修改配置文件，將絕對(duì)路徑改為相對(duì)路徑。

具體操作如下：

1.vue-cli 3.0版本之前

配置config下面的index.js中bulid模塊導(dǎo)出的路徑。因?yàn)閕ndex.html里邊的內(nèi)容都是通過script標(biāo)簽引入的，而你的路徑不對(duì)，打開肯定是空白的。先看一下默認(rèn)的路徑。

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默認(rèn)的是  ‘/'  也就是根目錄。而我們的index.html和static在同一級(jí)目錄下面。  所以要改為  ‘./ '

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路由配置里邊默認(rèn)模式是hash，如果你改成了history模式的話，打開也會(huì)是一片空白。所以改為hash或者直接把模式配置刪除，讓它默認(rèn)的就行 。

如果非要使用history模式的話，需要你在服務(wù)端加一個(gè)覆蓋所有的情況的候選資源：如果URL匹配不到任何靜態(tài)資源，則應(yīng)該返回一個(gè)index.html,這個(gè)頁(yè)面就是你app依賴頁(yè)面。

// mode: 'history' // 默認(rèn)hash

二、assets目錄下圖片加載不出來(lái)

vue-cli的assets和static的兩個(gè)文件的區(qū)別

• assets：在項(xiàng)目編譯的過程中會(huì)被webpack處理解析為模塊依賴，只支持相對(duì)路徑的形式，如< img src=’./logo.png‘>和background:url(./logo.png),‘./logo.png‘是相對(duì)資源路徑，將有webpack解析為模塊依賴。
• static：在這個(gè)目錄下文件不會(huì)被webpack處理,簡(jiǎn)單就是說存放第三方文件的地方，不會(huì)被webpack解析。他會(huì)直接被復(fù)制到最終的打包目錄(默認(rèn)是dist/static)下。必須使用絕對(duì)路徑引用這些文件，這是通過config.js文件中的build.assetsPublic和build.assertsSubDirectory鏈接來(lái)確定的。任何放在static/中文件需要以絕對(duì)路徑的形式引用：/static[filename]。

根據(jù)webpack的特性，總的來(lái)說就是static放不會(huì)變動(dòng)的，第三檔的文件，asserts放可能會(huì)變動(dòng)的文件

原因

在webpack中會(huì)將圖片圖片來(lái)當(dāng)做模塊來(lái)用，因?yàn)槭莿?dòng)態(tài)加載的，所以u(píng)rl-loader將無(wú)法解析圖片地址，然后npm run dev 或者npm run build之后導(dǎo)致路徑?jīng)]有被加工【被webpack解析到的路徑都會(huì)被解析為/static/img/[filename].png，完整地址為localhost:8080/static/img/[filename].png】

解決辦法

1.將圖片作為模塊加載進(jìn)去

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

2.將圖片放到static目錄下

但必須寫成絕對(duì)路徑如images:[{src:”/static/1.png”},{src:”/static/2.png”}]這樣圖片也會(huì)顯示出來(lái)，當(dāng)然你也可以通過在webpack.base.config.js定義來(lái)縮短路徑的書寫長(zhǎng)度。

簡(jiǎn)化本地圖片加載的方法

1.在static里面新建一個(gè)imageUrls文件夾

2.填寫imageUrls文件

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

3.將imageUrls引入響應(yīng)的vue文件中，解析引用就行了

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

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。