After downloading URL loader and specifying the size of the image with limit, the image will not be displayed

Download package processing style with url Path related packages

npm i url-loader file-loader -D

add to url-loader The rules , No report error

module: {
    rules: [
      {
        test: /\.jpg|png|gif$/,  
        use: ['url-loader],
      }
    ]
  }

Join in limit, To specify the size of the picture , The picture doesn't show

module: {
    rules: [
      {
        test: /\.jpg|png|gif$/,  
        use: ['url-loader?limit=22228'],
      }
    ]
  }

Solution steps ：

1. Check out the browser Console Whether there is a wrong report ------ No error reported

2. Rerun npm run dev, Check whether the terminal reports an error ------- No error reported

3. see webpack Official website search Asset Modules , Query to ：

stay webpack 5 Before , Usually use ：

• raw-loader Import the file as a string  
• url-loader Treat files as data URI Inline to package
• file-loader Send the file to the output directory

stay webpack 5 Using the old asset loader （ namely raw-loader/url-loader/file-loader)

• asset/inline Export asset data URI. Previously, you could use url-loader.
• asset Automatically export data URI Choose between sending a separate file . Previously, you could use url-loader Asset size limits .
• stay webpack 5 Use the old in assets loaders （ namely file-loader/ url-loader/ raw-loader） and  asset's module  when , You may want to stop assets loaders  Deal with your assets, Because it can lead to assets repeat . This can be achieved by asset's module type Set to To complete 'javascript/auto'.

---

To make a long story short , If you want to use webpack5, But I don't want to change the old loader The configuration file , Use old ones loader To complete the current task , Sure Add type: 'javascript/auto' To achieve .

added type: 'javascript/auto' after , No mistake. , however Still won't show pictures .

module: {
    rules: [
      {
        test: /\.jpg|png|gif$/, 
        use: ['url-loader?limit=22228'],
      }
    ],
  type: 'javascript/auto'
  }

4. stay Asset Modules Page has url-loader, Click enter to see about url-loader Some uses of ,

With exclusion , You can get rid of some knowledge , And there are no useful setting options ,

limit: Restrictions can be specified through the loader option , The default is unlimited .

boolean: Enable or disable converting files to base64.

...

Last , unsolvable .

5. Query browser Console Report a mistake , The first time did not show , After refresh , Display error message .

6. Read the wrong information to find problems ,

（1） seek index.html:38---------- No mistake , I only 30 Line code , No, 38 That's ok

（2） lookup get The success of ---------- The whole document has no get, No report error

（3） Find the last keyword ---------[object%20Module], stay webpack Official website search object module unsolvable

（4)  return 4, stay 4 See esModule（ There are module, Also in the url-loader Within the scope of ）

By default ,file-loader Build use ES Module syntax JS modular . In some cases , Use ES Modules are useful , For example, in Module connection and Shake a tree Under the circumstances .

You can enable CommonJS The module of grammar ：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              esModule: false,
            },
          },
        ],
      },
    ],
  },
};

7. Look not to understand , But I tried it in the code , It is found that the picture will be displayed without error .

8. Finally, baidu searched the question [object Module], Confirm that the conjecture is correct , obtain ：

esModule: false It can solve the problem of not displaying pictures .

Solution conclusion ：

Add esModule: false                                                                                                                   -_-