快捷導(dǎo)航

webpack?打包后圖片加載報錯的解決辦法

更新時間：2024年03月06日 11:29:27 作者：佩淇呢

使用webpack打包后,圖片沒有加載出來,頁面空白,報錯圖片引用的路徑不對,本文給大家介紹webpack?打包后圖片加載報錯的解決辦法,感興趣的朋友一起看看吧

解決辦法：

1.找到config->index.js

將 assetsPublicPath: '/', 改為 assetsPublicPath: './'

build: {
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',       // 改為 assetsPublicPath: './'
    ……
}

2.build->utils.js

找到下面這個函數(shù)的代碼。

在if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath:'../../'
})
}

代碼里添加 publicPath:'../../'

 function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }
    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {     
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath:'../../'     // 添加 publicPath:'../../' 
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

有的問題使用第一種辦法就可以解決，我有些圖片放在全局，全局的圖片沒有打包出來，添加了第二種解決辦法，圖片解決了。

補充：

webpack 打包圖片文件

一、準(zhǔn)備工作

1. 在src文件夾中新建一個img文件夾，并且在里面放兩張圖片；

2.在css文件中引用圖片，從而讓webpack能夠知道這個圖片也是要打包的；

二、使用url-loader和file-loader

能打包圖片的loader有url-loader、file-loader;二者的區(qū)別在于當(dāng)圖片的大小>url-loader中的limit時，那么webpack會選擇使用file-loader來打包。關(guān)于如何在webpack中文官網(wǎng)找到loader并且如何使用請看我的其他文章。

1. 接下來看一下詳細(xì)的url-loader配置:

重點放在options中的limit和name, limit的作用就是當(dāng)要打包的圖片大小>limit設(shè)置的值時，會使用file-loader進行打包。name的作用是對打包生成的圖片文件進行命名規(guī)約；我來詳細(xì)解釋一下： img/的作用是在dist目錄下會新建一個img文件夾用于存放圖片；[name]是使用圖片原本的名稱;[hash:8]是通過哈希函數(shù)將圖片的名字進行計算，然后取前8位;[ext]就是圖片文件本身的后綴名。[name].[hash:8].[ext]就是用來生成文件名的，所以打包后圖片最終的效果就是這樣了：