Vue項目build后,圖片加載不出來的解決
Vue項目build圖片加載不出來
vue項目，build之后會對圖片進(jìn)行處理，具體處理的方式是在文件webpack.base.conf.js中，有如下代碼：
module: {
? ? rules: [
? ? ?{
? ? ? ? test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
? ? ? ? loader: 'url-loader',
? ? ? ? options: {
? ? ? ? ? limit: 10000, // 1k-----限制文件的大小
? ? ? ? ? name: utils.assetsPath('img/[name].[hash:7].[ext]')
? ? ? ? }
? ? ?}
? ? ]
}以上代碼中，使用url-loader對圖片的大小進(jìn)行限制，在limit之內(nèi)，webpack會將圖片轉(zhuǎn)化為base64，超出limit限制，交給file-loader處理。
如果在limit范圍之內(nèi)，不會出現(xiàn)圖片加載不出來的情況；
超出limit，webpack會將處理后的圖片放在dist/static/img/中，此時加載圖片將會顯示不出來。具體做法如下：
1.在config/index.js文件內(nèi)
修改代碼： (列出index.js的部分代碼)
build: {
? ? // Template for index.html
? ? index: path.resolve(__dirname, '../dist/index.html'),
?
? ? // Paths
? ? assetsRoot: path.resolve(__dirname, '../dist'),
? ? assetsSubDirectory: 'static',
? ? assetsPublicPath: './',?
}assetsPublicPath字段值由之前的'/'改為'./'；
2.在webpack.prod.conf.js文件內(nèi)
output字段，添加代碼(publicPath: './')：
output: {
? ? publicPath: './', // 添加的代碼
? ? path: config.build.assetsRoot,
? ? filename: utils.assetsPath('js/[name].[chunkhash].js'),
? ? chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
? },3.在utils.js文件里添加 publicPath:'../../'
代碼如下：
// (which is the case during production build)
if (options.extract) {
? return ExtractTextPlugin.extract({
? ? use: loaders,
? ? fallback: 'vue-style-loader',
? ? publicPath: '../../' ?// 添加的代碼
? })
} else {
? return ['vue-style-loader'].concat(loaders)
}以上步驟操作完后，執(zhí)行命令:npm run build
在build后，dist中的index.html頁面的link、script標(biāo)簽的引入路徑變?yōu)橄鄬β窂剑煌瑫r，相關(guān)的圖片路徑，也變變?yōu)橄鄬β窂?，此時部署項目，不再出現(xiàn)圖片路徑404。
Vue項目打包后部分圖片不顯示
1.圖片的后綴名不能含ad字母敏感詞（即谷歌會認(rèn)為是廣告，并自動刪除）
2.圖片本身（質(zhì)量）的原因，跟前端無關(guān)，需讓UI給新的設(shè)計圖片。--備注：QQ直接截圖到本地的圖片打包后可能也不顯示，需跟UI要原始設(shè)計圖。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue通過懶加載提升頁面響應(yīng)速度，對Vue性能感興趣的同學(xué)，可以參考下2021-05-05
Vue進(jìn)行數(shù)據(jù)可視化圖表展示的實現(xiàn)示例
數(shù)據(jù)可視化是現(xiàn)代化的數(shù)據(jù)分析和展示方式,可以使數(shù)據(jù)更加直觀、易于理解和傳達(dá),Vue作為一款流行的前端框架,提供了豐富的插件和工具來實現(xiàn)數(shù)據(jù)可視化圖表展示,本文將介紹如何使用Vue和Echarts/D3.js來實現(xiàn)數(shù)據(jù)可視化圖表展示,并提供示例代碼和實際應(yīng)用場景2023-10-10
在Vue實例中,data屬性是用戶定義的用于存儲數(shù)據(jù)的對象,而_data是Vue內(nèi)部用于存儲數(shù)據(jù)的對象,本文主要介紹了淺談vue中的data與_data的關(guān)系是什么,感興趣的可以了解一下2023-12-12
vue動態(tài)刪除從數(shù)據(jù)庫倒入列表的某一條方法
今天小編就為大家分享一篇vue動態(tài)刪除從數(shù)據(jù)庫倒入列表的某一條方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue+webpack 更換主題N種方案優(yōu)劣分析，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了vue項目中如何將當(dāng)前頁面生成圖片問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue中為什么要引入render函數(shù)的實現(xiàn)
本文主要介紹了Vue中為什么要引入render函數(shù)的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
在Vue項目中用fullcalendar制作日程表的示例代碼
這篇文章主要介紹了在Vue項目中用fullcalendar制作日程表，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
Vue結(jié)合Video.js播放m3u8視頻流的方法示例
本篇文章主要介紹了Vue+Video.js播放m3u8視頻流的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了詳解如何搭建mpvue框架搭配vant組件庫的小程序項目，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05