在html中引入img圖片
創(chuàng)新互聯(lián)公司長期為成百上千客戶提供的網(wǎng)站建設(shè)服務(wù),團隊從業(yè)經(jīng)驗10年,關(guān)注不同地域、不同群體,并針對不同對象提供差異化的產(chǎn)品和服務(wù);打造開放共贏平臺,與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為興安企業(yè)提供專業(yè)的成都網(wǎng)站制作、做網(wǎng)站,興安網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document1</title> </head> <body> <div id="root" > <img src="./logo.jpg" alt=""> </div> </html>
使用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"
卻可以正常打包
后來發(fā)現(xiàn)file-loader在新版本中esModule默認(rèn)為true,因此手動設(shè)置為false
{ test: /\.(png|jpg|gif|jpeg)$/, use: [{ loader: 'url-loader', // loader: 'file-loader', options: { esModule: false, // 這里設(shè)置為false name: '[name].[ext]', limit: 10240 } }] }
這樣就可以正常打包了
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
分享名稱:webpack打包html里面img后src為“[objectModule]”問題
分享網(wǎng)址:http://bm7419.com/article26/psdicg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站改版、網(wǎng)站制作、關(guān)鍵詞優(yōu)化、網(wǎng)站收錄、企業(yè)建站、營銷型網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)