webpack打包html里面img后src為“[object Module]”問題
更新時間：2019年12月22日 11:36:27 作者：LDP_Rou
這篇文章主要介紹了webpack打包html里面img后src為“[object Module]”問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
在html中引入img圖片
<!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結合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默認為true，因此手動設置為false
{
test: /\.(png|jpg|gif|jpeg)$/,
use: [{
loader: 'url-loader',
// loader: 'file-loader',
options: {
esModule: false, // 這里設置為false
name: '[name].[ext]',
limit: 10240
}
}]
}
這樣就可以正常打包了
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了js實現(xiàn)上傳文件添加和刪除文件選擇框 ,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要為大家詳細介紹了BootStrap表單的制作代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要為大家詳細介紹了js ajaxupload.js上傳報錯的解決方法，感興趣的小伙伴們可以參考一下
2016-05-05 
這篇文章主要介紹了JS模擬bootstrap下拉菜單效果,結合完整實例形式分析了javascript動態(tài)操作頁面元素的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2016-06-06 
這篇文章主要介紹了微信小程序實時聊天支持圖片預覽，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-05-05 
這篇文章主要為大家詳細介紹了localStorage實現(xiàn)便簽小程序的相關資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-11-11 
下面小編就為大家?guī)硪黄猨s 自帶的sort() 方法全面了解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08 
這篇文章主要介紹了在uni-app中踩過的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04 
這篇文章主要介紹了Javascript發(fā)送AJAX請求的實例代碼，非常不錯，具有參考借鑒價值,需要的朋友可以參考下
2016-08-08