亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

VUE使用webpack打包后,圖片超過webpack.config.js里面設置的限制值時不顯示

VUE使用webpack打包后,圖片超過webpack.config.js里面設置的限制值時不顯示

函數式編程 2019-02-26 17:20:56
先貼上webpak.base.config.js關于圖片的代碼test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,        loader: 'url-loader',        options: {          limit: 10000,          name: utils.assetsPath('img/[name].[hash:7].[ext]')        }小于10k的圖片都形成了base64碼正常顯示但是超過的顯示不了,css屬性為這樣完整路徑為這樣config.index.js的代碼如下如果將上面的assetsPublicPath按照部分網上的更改為'/'的話則所有打包后的引用路徑為這樣file:///D:/static/js/app.77e13a999be27db608eb.js就沒有在項目目錄下css寫在VUE文件里,圖片文件放在src的平級目錄static里
查看完整描述

1 回答

?
慕桂英3389331

TA貢獻2036條經驗 獲得超8個贊

圖片不顯示無非就兩種情況:一種是資源找不到,一種是樣式問題,其中樣式有可能是圖片無高寬、層疊過低被覆蓋等等!不過也有種奇葩情況,就是圖片資源剛剛大于limit值一點點,如果該圖片多個地方使用,會出現有些地方也會打包成base64,有些地方不會,那不會的地方就不會顯示,我們公司項目就遇到了這種奇葩情況。這說明limit也會有微小誤差的。
疑惑:
圖片打包完引用路徑不應該以‘/’開頭嗎?您這邊是相對路徑,在css文件中應該是找不到的。我這邊打包路徑是這樣的:

https://img1.sycdn.imooc.com//5c7f2b1e00016bb303650097.jpg

是以‘/’開頭的。

腳手架:index.js有設置圖片打包路徑的。

https://img1.sycdn.imooc.com//5c7f2b2a0001e11608000121.jpg

https://img1.sycdn.imooc.com//5c7f2b2b00013c9608000554.jpg

只要
https://img1.sycdn.imooc.com//5c7f2b2f00016e8d08000437.jpg

我的個人服務器結果展示:

https://img1.sycdn.imooc.com//5c7f2b32000193c808000395.jpg

疑惑點:開發用的靜態資源為什么放在這里面

https://img1.sycdn.imooc.com//5c7f2b3500019ba608000312.jpg

這里面是靜態資源,不需要版本管理的,腳手架直接copy的,具體進入webpack.prod.conf.js看看:

https://img1.sycdn.imooc.com//5c7f2b380001419a08000321.jpg

將您用于開發的靜態資源移入src/assets下面


查看完整回答
反對 回復 2019-03-06
  • 1 回答
  • 0 關注
  • 756 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號