Nuxt.js: "src" of img returns src="[object Module]" in browser

[iotronlab]

Version

v2.12.2

Reproduction link

https://github.com/vuejs/vue-loader/issues/1612

Steps to reproduce

npm install file-loader to install latest on new create-nuxt-app boilerplate.
In Nuxt v2.12.2 The file-loader dependency should not be higher than version 4.1.0, or <img src="~/assets/images/name.jpg" /> will return src="[object Module]"

What is expected ?

images to load from assets folder

What is actually happening?

"src" of img returns src="[object Module]" in browser

_{This bug report is available on Nuxt community (#c10625)}

[simllll]

related https://github.com/nuxt-community/svg-module/issues/40

[clarkdo]

@iotronlab If you're using latest version file-loader or url-loader, you can add esmodule: false by https://nuxtjs.org/api/configuration-build#loaders

export default {
  build: {
    loaders: {
      file: { esModule: false }
    }
  }
}

This is because vuejs/component-compiler-utils is resolving asset url via require, but file-loader >= 5.0 generates ES modules syntax.

BTW, Nuxt.js won't upgrade to file-loader >= 5.0 unti V3 because file-loader >= 5.0 requires minmun Node.js 10 which is a breaking change to Nuxt.js V2.

[clarkdo]

@sodatea Do you have any plan to support ES Module asset url in https://github.com/vuejs/component-compiler-utils ? 😸

If not, we may consider adding esModule: false to default option of file-loader in Nuxt.js v3 @Atinux @pi0

[sodatea]

I don't yet have the capacity to add this feature. So unless there is an incoming PR, es modules won't be supported in the near future (at least for the next 2 months, according to my current schedule).

[nachogarcia]

I had this same issue with .svg and .gif not showing after updating to latest nuxt version, but solved it adding loaders: { imgUrl: { esModule: false } },