vue中图片引入为[object Module]

最近在使用cli3创建项目的时候,img图片运行之后i属性src="[object Module]",无法直接显示出来了。
网上找了一圈,应该是file-loader的问题,在此记录下解决问题的方法。

因为使用的是cli3的创建方式,所以会在 packjson.json 同级文件夹内创建 vue.config.js 配置文件

文件内容如下:

module.exports = {
  chainWebpack: config => {
    const imagesRule = config.module.rule('images')
    imagesRule.uses.clear()
    // 删除images的rule
    imagesRule.use('file-loader')
      .loader('url-loader')
      .options({
        limit: 10000,
        // 设置图片大小
        fallback: {
          loader: 'file-loader',
          options: {
            name: 'img/[name].[hash:8].[ext]'