问题记录：file-loader和url-loader同时使用引起的图片不展示

问题描述：再vue项目中的chainWebpack中添加里file-loader，导致图片地址改为base64但是图片不展示

解决过程：

file-loader：对文件的名称，打包后的地址和打包后的输出位置进行修改

url-loader：可以通过对文件大小进行设置来判断是对图片进行引用还是直接编码再html代码中

vue inspect > output.js：可以查看vue最后的有效配置（官网找的）

通过使用vue inspect > output.js我们可以再得到的js文件中默认的配置是

 /* 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]'
                }
              }
            }
          }
        ]
      },

如果我在chainWebpack中添加里file-loader，实际的生效的配置为：

 /* 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]'
            }
          }
        ]
      },

此时打包后的图片标签src属性的内容是一个图片地址的base64的值，而这个值还是不对的所以图片无法展示

正确配置的截图：

错误配置截图：

所以在vue中要使用file-loader修改png|jpe?g|gif|webp文件等的名称，最好是通过url-loader的fallback属性去调用file-loader。如下的配置：

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