vue-cli中圖片路徑不對的相關(guān)處理

1.用js動態(tài)加載assets或者本文件的圖片出現(xiàn)404的狀態(tài)碼

原因:在webpack中會將圖片圖片來當(dāng)做模塊來用靴患,因為是動態(tài)加載的钉疫,所以url-loader將無法解析圖片地址涉瘾,然后npm run dev 或者npm run build之后導(dǎo)致路徑?jīng)]有被加工【被webpack解析到的路徑都會被解析為/static/img/[filename].png知态,完整地址為localhost:8080/static/img/[filename].png】

解決方法:將圖片作為模塊加載進(jìn)去,比如images:[{src:require(‘./1.png')},{src:require(‘./2.png')}]這樣webpack就能將其解析立叛。


2.打包后img標(biāo)簽圖片路徑不對

解決辦法:

config/index.js文件的build->assetsPublicPath的默認(rèn)值改為 './'

assetsPublicPath:資源的根目錄负敏。這個是通過http服務(wù)器運行的url路徑。因為webapp和static中間還有層dist,所以要用'./'

3.打包后背景圖片路徑不對

為什么背景圖有的打包后存在秘蛇,有的丟失原在,那是因為vue會把圖片轉(zhuǎn)成base64,但是圖片大小超過閾值就不轉(zhuǎn)了友扰,直接引,而背景圖片里用的是相對路徑最后會直接替換成static庶柿,但是明顯路徑會有問題村怪,所以得配置下

build/utils.js


?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市浮庐,隨后出現(xiàn)的幾起案子甚负,更是在濱河造成了極大的恐慌,老刑警劉巖审残,帶你破解...
    沈念sama閱讀 211,265評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件梭域,死亡現(xiàn)場離奇詭異,居然都是意外死亡搅轿,警方通過查閱死者的電腦和手機(jī)病涨,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,078評論 2 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來璧坟,“玉大人既穆,你說我怎么就攤上這事∪妇椋” “怎么了幻工?”我有些...
    開封第一講書人閱讀 156,852評論 0 347
  • 文/不壞的土叔 我叫張陵,是天一觀的道長黎茎。 經(jīng)常有香客問我囊颅,道長,這世上最難降的妖魔是什么傅瞻? 我笑而不...
    開封第一講書人閱讀 56,408評論 1 283
  • 正文 為了忘掉前任踢代,我火速辦了婚禮,結(jié)果婚禮上嗅骄,老公的妹妹穿的比我還像新娘胳挎。我一直安慰自己,他們只是感情好掸读,可當(dāng)我...
    茶點故事閱讀 65,445評論 5 384
  • 文/花漫 我一把揭開白布串远。 她就那樣靜靜地躺著,像睡著了一般儿惫。 火紅的嫁衣襯著肌膚如雪澡罚。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,772評論 1 290
  • 那天肾请,我揣著相機(jī)與錄音留搔,去河邊找鬼。 笑死铛铁,一個胖子當(dāng)著我的面吹牛隔显,可吹牛的內(nèi)容都是我干的却妨。 我是一名探鬼主播,決...
    沈念sama閱讀 38,921評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼括眠,長吁一口氣:“原來是場噩夢啊……” “哼彪标!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起掷豺,我...
    開封第一講書人閱讀 37,688評論 0 266
  • 序言:老撾萬榮一對情侶失蹤捞烟,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后当船,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體题画,經(jīng)...
    沈念sama閱讀 44,130評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,467評論 2 325
  • 正文 我和宋清朗相戀三年德频,在試婚紗的時候發(fā)現(xiàn)自己被綠了苍息。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,617評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡壹置,死狀恐怖竞思,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情蒸绩,我是刑警寧澤衙四,帶...
    沈念sama閱讀 34,276評論 4 329
  • 正文 年R本政府宣布铃肯,位于F島的核電站患亿,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏押逼。R本人自食惡果不足惜步藕,卻給世界環(huán)境...
    茶點故事閱讀 39,882評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望挑格。 院中可真熱鬧咙冗,春花似錦、人聲如沸漂彤。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,740評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽挫望。三九已至立润,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間媳板,已是汗流浹背桑腮。 一陣腳步聲響...
    開封第一講書人閱讀 31,967評論 1 265
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留蛉幸,地道東北人破讨。 一個月前我還...
    沈念sama閱讀 46,315評論 2 360
  • 正文 我出身青樓丛晦,卻偏偏與公主長得像,于是被迫代替她去往敵國和親提陶。 傳聞我的和親對象是個殘疾皇子烫沙,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,486評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 原文http://www.cnblogs.com/libin-1/p/6596810.html 版本號 vue-c...
    tengrl閱讀 3,638評論 0 0
  • GitChat技術(shù)雜談 前言 本文較長,為了節(jié)省你的閱讀時間隙笆,在文前列寫作思路如下: 什么是 webpack斧吐,它要...
    蕭玄辭閱讀 12,679評論 7 110
  • 在現(xiàn)在的前端開發(fā)中,前后端分離仲器、模塊化開發(fā)煤率、版本控制、文件合并與壓縮乏冀、mock數(shù)據(jù)等等一些原本后端的思想開始...
    Charlot閱讀 5,433評論 1 32
  • 版權(quán)聲明:本文為博主原創(chuàng)文章,未經(jīng)博主允許不得轉(zhuǎn)載肢扯。 webpack介紹和使用 一妒茬、webpack介紹 1、由來 ...
    it筱竹閱讀 11,055評論 0 21
  • 一直想看這部電影,還沒抽出一個人去看的半日時間铭腕,就匆匆下線了银择。 托福騰訊視頻,抽時間下載來斷續(xù)看完了累舷,非常喜歡浩考。 ...
    止末閱讀 5,612評論 4 7