file-loader打包圖片文件時(shí)路徑錯(cuò)誤輸出為[object-module]怎么辦

小編給大家分享一下file-loader打包圖片文件時(shí)路徑錯(cuò)誤輸出為[object-module]怎么辦，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

當(dāng)陽(yáng)網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)公司！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、響應(yīng)式網(wǎng)站設(shè)計(jì)等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)公司自2013年創(chuàng)立以來(lái)到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專(zhuān)注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)公司。

最近在學(xué)習(xí)使用webpack4.0自己搭建vue腳手架，在搭建過(guò)程中，踩了許多坑，使用file-loader打包圖片文件時(shí)就遇到了以下的問(wèn)題。

這是我的webpack 處理打包圖片相關(guān)配置項(xiàng)：

...
module: {
 rules: [
 ...
 {
  test: /\.(jpe?g|png|gif|svg)$/i,
  use: [
  {
   loader: 'url-loader',
   options: {
   limit: 10000,
   name: '[name].[ext]',
   outputPath: 'imgs/'
   }
  }
  ]
 },
 ...
 ]
}
...

這個(gè)配置也是和目前網(wǎng)上教程差不多的。使用 url-loader 編譯圖片文件，輸出到imgs文件夾下，乍一看也沒(méi)什么問(wèn)題，我相信你也是這么認(rèn)為的。

但是webpack構(gòu)建之后，會(huì)發(fā)現(xiàn)，頁(yè)面上引用的圖片都無(wú)法正常顯示：

圖片引用錯(cuò)誤

打開(kāi)控制臺(tái)，會(huì)發(fā)現(xiàn)所有圖片的路徑都變成了 [object module]

object module

經(jīng)過(guò)一番努力的探索，終于在stackoverflow上找到了 相應(yīng)的問(wèn)題

下方回答我翻譯下：

默認(rèn)情況下，file-loader生成使用ES模塊語(yǔ)法的JS模塊。在某些情況下，使用ES模塊是有益的，比如在模塊連接和樹(shù)抖動(dòng)的情況下。

file-loader-options

簡(jiǎn)而言之就是file-loader新版本默認(rèn)使用了esModule語(yǔ)法，造成了引用圖片文件時(shí)的方式和以前的版本不一樣，通過(guò)查看其倉(cāng)庫(kù)的release會(huì)發(fā)現(xiàn)：在v4.3.0版本就引入這一新特性。

file-loader-versions

那如何解決這一問(wèn)題呢？在剛才的stackoverflow問(wèn)題回答里說(shuō)明了有兩種解決方法：

在引用圖片時(shí)，加個(gè) .default 后綴

<img src="require('assets/logo.png').default"/>

在webpack的file-loader配置項(xiàng)里，設(shè)置esModule為false

{
 test: /\.(jpe?g|png|gif|svg)$/i,
 use: [
 {
  loader: 'file-loader',
  options: {
  esModule: false
  }
 }
 ]
}

兩種方法對(duì)比起來(lái)，顯而易見(jiàn)，相信你已經(jīng)知道了哪個(gè)方法更好用。于是我修改了webpack配置后，再編譯，就沒(méi)問(wèn)題啦:wink:。

build-success

看完了這篇文章，相信你對(duì)“file-loader打包圖片文件時(shí)路徑錯(cuò)誤輸出為[object-module]怎么辦”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

文章題目：file-loader打包圖片文件時(shí)路徑錯(cuò)誤輸出為[object-module]怎么辦
網(wǎng)頁(yè)地址：http://bm7419.com/article38/gijssp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、網(wǎng)站維護(hù)、品牌網(wǎng)站設(shè)計(jì)、軟件開(kāi)發(fā)、外貿(mào)建站、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)