vue 项目中引入图片使用相对路径,图片不显示的问题


在 vue 项目中引入图片,路径为相对路径时,会显示 src="[object Module]"

采用 import 方式引入图片,再设置到 src 中 会正常显示

file-loader 版本

当 file-loader 版本为4.3.0 及以上时,需要在 配置文件中手动配置属性 esModule 为 false

module.exports = {
  ...,

  module: {

    rules: [
     {
        test:/\.(png|jpg|jpeg|gif|svg)$/,
        use: [
          {
            loader:'file-loader',
            options: {
              esModule: false,
              name: 'images/[hash].[ext]'
            }
          }
        ]
      }
    ]
  }
}