在html中引入img圖片

創(chuàng)新互聯(lián)公司長(zhǎng)期為成百上千客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為興安企業(yè)提供專(zhuān)業(yè)的成都網(wǎng)站制作、做網(wǎng)站，興安網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

使用url-loader/file-loader結(jié)合html-loader打包

{
  test: /\.(png|jpg|gif|jpeg)$/,
  use: [{
    loader: 'url-loader',
    loader: 'file-loader',
    options: {
      name: '[name].[ext]',
      limit: 10240
    }
  }]
},
{
  test: /\.(htm|html)$/,
  loader: 'html-loader'
}

發(fā)現(xiàn)打包后html里面，img的src為[object Module]，

但是如果使用"file-loader": "^4.2.0"或者"file-loader": "^2.0.0"卻可以正常打包

后來(lái)發(fā)現(xiàn)file-loader在新版本中esModule默認(rèn)為true，因此手動(dòng)設(shè)置為false

{
  test: /\.(png|jpg|gif|jpeg)$/,
  use: [{
    loader: 'url-loader',
    // loader: 'file-loader',
    options: {
      esModule: false, // 這里設(shè)置為false
      name: '[name].[ext]',
      limit: 10240
    }
  }]
}

這樣就可以正常打包了

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。