file-loader和image-webpack-loader图片不显示

Question

配置如下

  module: {
      rules: [{
        test: /\.(gif|png|jpe?g|svg)$/i,
        exclude: path.resolve(__dirname, './src/assets/icons'),
        use: [
          {
            loader: 'file-loader',
            options: {
              esModule: false,
              name: '[path][name].[ext]'
              // useRelativePath: true
            }
          },
          {
            loader: 'image-webpack-loader',
            options: {
              bypassOnDebug: true, // webpack@1.x
              disable: true // webpack@2.x and newer
            }
          }]
      }]
    },

页面和css中引入

 <img src="@/assets/images/login/logo.png" >
 
div{  background: url("~@/assets/images/login.gif")};

项目跑起来后，页面图片src进行了base64转换，但图片显示不了，结果如下：

<img data-v-37dfd6fc="" src="data:image/png;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJzcmMvYXNzZXRzL2ltYWdlcy9sb2dpbi9sb2dvLXdoaXRlLnBuZyI7">

div{
    background: url(data:image/gif;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhf)
}

请问是什么地方配置有问题吗？打包后对应的目录也有相关的文件，但不知道为啥显示不了，而且是系统所有的图片都不能正常显示

Answer 1

外面包一层判断是否是生产环境就可以了。

Answer 2

你好，请问你的问题解决了吗