解决Vue中img图像src变成"[object Module]"无法正确加载的问题

问题描述

Vue官方文档中说了vue-loader的基本原理,他会将Vue模板中的<img src="../image.png">转为下面这段JS代码:

createElement('img', {
  attrs: {
    src: require('../image.png')  // require()是CommonJS模块语法
  }
})

对于图像我们在Webpack中肯定会使用url-loader或file-loader来处理:

{
  test: /\.(png|jpe?g|gif|svg)$/,
  loader: 'url-loader',
  options: {
    limit: 1024
  }
}

然而这样最后生成的图像会变成<img src="[object Module]">,无法显示。

解决方案

这是因为file-loader默认采用ES模块语法,即import '../image.png';然而Vue生成的是CommonJS模块语法,即require('../image.png');二者不一致。要么让file-loader或url-loader采用CommonJS语法,要么让Vue采用ES语法。

刚好file-loader或url-loader有一个esModule选项能调整,将其设置为false即可:

{
  test: /\.(png|jpe?g|gif|svg)$/,
  loader: 'url-loader',
  options: {
    limit: 1024,
    esModule: false
  }
}

总结

现在是2020年01月18日,然而目前在Webpack的中文文档中根本没提到esModule这个参数,只有Webpack英文文档中提到了,大家可以去看看。

所以说尽量还是看英文文档吧,英文真的是大多数从业者提升技术的门槛啊。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容