<img SRC = {“default”:”img/01.6b0f10f0.jpg”} />

After packing with Webpack, the img path in HTML was found to be incorrect. The plugin I use is htMl-withimg-loader.

In fact, the path of the IMG tag is an object when it is packaged with html-loader or htMl-withimg-loader. The solution to this problem is that the configuration in url-loader or file-loader is not fully written.

Code:

{
	test:/\.html$/.use: ['html-withimg-loader']
	//use:['html-loader']
}
Copy the code

After configuring the HTML loader, whether you use url-loader or file-loader, you need to write this step:

{
	test: /\.(jpe? g|png|gif)$/i.// Image file
	use: [
	  {
		loader: 'url-loader'.//include: [path.resolve(__dirname, "../src/static")],
		options: {
		  // Set this configuration item to false
		  esModule: false.limit: 10240.name: 'img/[name].[hash:8].[ext]'.//outputPath: 'img/',
		  //publicPath: '.. / '}}},Copy the code

Just go to esModule: false, run the packaged command again, open index.html again and find:

<img src="Img / 01.6 b0f10f0. JPG" />

Copy the code

This changes the img path problem.