Problem Description: Add File-Loader in the chainWebPack in the VUE project, resulting in the image address to Base64 but the picture does not show

Solution process:

FILE-Loader: Modify the name of the file, packaged address and packaged output position

URL-LOADER: Can you determine the file size or directly encoded in the HTML code

Vue Inspect> Output.js: You can view the final valid configuration of VUE (found on the official website)

By using Vue Inspect> Output.js We can get the default configuration in the JS file.

 /* config.module.rule('images') */
      {
        test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
        use: [
          {
            loader: 'D:\\work\\SPA\\sub1-project\\node_modules\\url-loader\\dist\\cjs.js',
            options: {
              limit: 4096,
              fallback: {
                loader: 'D:\\work\\SPA\\sub1-project\\node_modules\\file-loader\\dist\\cjs.js',
                options: {
                  name: 'img/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },

If I add File-Loader in ChainWebPack, the actual entry into effect is:

 /* config.module.rule('images') */
      {
        test: /\.(png|jpe?g|gif|bmp)(\?.*)?$/,
        use: [
          {
            loader: 'D:\\work\\SPA\\sub1-project\\node_modules\\url-loader\\dist\\cjs.js',
            options: {
              limit: 4096,
              fallback: {
                loader: 'D:\\work\\SPA\\sub1-project\\node_modules\\file-loader\\dist\\cjs.js',
                options: {
                  name: 'img/[name].[hash:8].[ext]'
                }
              }
            }
          },
          {
            loader: 'file-loader',
            options: {
              name: '[name].[hash:8].[ext]'
            }
          }
        ]
      },

At this time, the content of the packaged picture tag SRC property is the value of the base64 of the image address, and this value is not right, so the picture cannot be displayed

A screenshot:

Error configuration screenshot:

So use the file-loader to modify the name of the PNG | JPE? G | GIF | Webp file in VUE, it is best to call File-Loader through the fallback attribute of URL-Loader. The following configuration:

{
                test: /\.(png|jpe?g|gif|bmp)(\?.*)?$/,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                      limit: 4096000,
                      fallback: {
                        loader: 'file-loader',
                        options: {
                          name: '[name].[hash:8].[ext]'
                        }
                      }
                    }
                  },
                ]
            }