vue中圖片加載不出來(lái)的問題及解決
在使用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è)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue-router如何實(shí)現(xiàn)history模式配置
這篇文章主要介紹了vue-router如何實(shí)現(xiàn)history模式配置,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06
vue 框架下自定義滾動(dòng)條(easyscroll)實(shí)現(xiàn)方法
這篇文章主要介紹了vue 框架下自定義滾動(dòng)條(easyscroll)實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
vue1.0和vue2.0的watch監(jiān)聽事件寫法詳解
今天小編就為大家分享一篇vue1.0和vue2.0的watch監(jiān)聽事件寫法詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-09-09
vuex實(shí)現(xiàn)購(gòu)物車的增加減少移除
這篇文章主要為大家詳細(xì)介紹了vuex實(shí)現(xiàn)購(gòu)物車的增加減少移除,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06
Vue兩個(gè)版本的區(qū)別和使用方法(更深層次了解)
在我們使用 vue時(shí),我們可以引用兩個(gè)不同版本的 Vue,分別是 Vue完整版(vue.js)和 Vue(vue.runtime.js )非完整版,那么它們的區(qū)別是什么呢,今天我們就來(lái)分析下這兩個(gè)不同版本之間的區(qū)別,一起看看吧2020-02-02
Vue遞歸實(shí)現(xiàn)樹形菜單方法實(shí)例
學(xué)習(xí)vue有一段時(shí)間了,最近使用vue做了一套后臺(tái)管理系統(tǒng),其中使用最多就是遞歸組件,下面這篇文章主要給大家介紹了關(guān)于Vue利用遞歸實(shí)現(xiàn)樹形菜單的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2018-11-11
vue+springboot實(shí)現(xiàn)圖形驗(yàn)證碼Kaptcha的示例
圖形驗(yàn)證碼是做網(wǎng)站常用的功能,本文主要介紹了vue+springboot實(shí)現(xiàn)圖形驗(yàn)證碼Kaptcha的示例,具有一定的參考價(jià)值,感興趣的可以了解一下2023-11-11
vue中g(shù)et請(qǐng)求如何傳遞數(shù)組參數(shù)的方法示例
這篇文章主要介紹了vue中g(shù)et請(qǐng)求如何傳遞數(shù)組參數(shù)的方法示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11

