Workaround: set the esModule option in url-loader to false.

It's because in @vue/component-compiler-utils we transformed the asset urls to require statements, which expect CommonJS modules, while the recent major release of url-loader emits ES modules by default.

Oh...! I see. I'm careless!

Was this issue fixed and released? I seem to have run into a similar scenario when using rails (v6.0.2.2) with webpacker (5.0.1) and vue-loader (v15.9.1). Existing images which were previously rendered fine now show source as src="[object Module]".

I seem to have run into a similar scenario when using rails (v6.0.2.2) with webpacker (5.0.1) and vue-loader (v15.9.1).

Same for me, I've just started a project and v15.9.1 was loaded from repro. My image sources showing src="[object Module]"

If you use file-loader, upgrade it to 6.0.0 version and specify esModule: false in options:

{
  test: /\.(png|jpe?g|gif|svg)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[contenthash].[ext]',
        outputPath: 'static/img',
        esModule: false // <- here
      }
    }
  ]
}

For Rails with Vue developer

@rails/webpacker: 5.0.1

Add the following line in file config/webpack/environment.js:

/* Fix a bug for file inclusion like <img :src="require()"/> */
environment.loaders.get('file').use.find(item => item.loader === 'file-loader').options.esModule = false

before

module.exports = environment

This issue is also present in Nuxt 2.12.0

You can still access the string value through the 'default' property:
require('@/assets/images/logo-1.png').default

Downgrading to file-loader to ^2.0.0 (which is the version laravel mix depends on) seems to "fix"/prevent the problem as well.