url-loader3.0 img标签src值为「Object Module」的解决办法 「Webpack4.0」
kite1874 / 2020-01-07 / Web前端 / 阅读量 432

今天在学习Vue的时候,遇到了一个bug。img的图片始终无法显示,检查了图片的路径「相对路径」都是对的。我就开始怀疑是否是「webpack.config.js」的问题。该来该去,折腾了半天都没找出哪里出问题。

F12检查,发现src的值为「Object Module」,一脸懵逼。

查看了不少网上的文章,才发现,原来新版本的「url-loader」默认「esModule=true」。只要在配置中添加「esModule=false」就OK了。

这是我之前的配置信息

 module:{
        rules:[
            { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?esModule=false&limit=7631&name=[hash:8]-[name].[ext]' },
        ]
    }

修改后:

 module:{
        rules:[
            { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?esModule=false&limit=7631&name=[hash:8]-[name].[ext]' },
        ]
    }

如果你配置信息是这种格式,就在配置信息中添加「esModule=false」就OK了

 module:{
        rules:[
            { test: /\.(jpg|png|gif|bmp|jpeg)$/,
            use: [
                esModule=false,
                limit=7631,
                name=[hash:8]-[name].[ext],
            ] },
        ]
    }