Vue asset images not loading

• Laravel Mix Version: 6.0.9
• Node Version: 15.5.1
• NPM Version: 7.3.0
• OS: Mac OS Big Sur 11.1

Description:

After upgrading to Laravel Mix 6 my build runs successfully but images referenced from the assets folder no longer are loading.

Steps To Reproduce:

Running an existing Laravel v8.21.0 project with Laravel/UI Vue auth scaffolding, after upgrading Laravel Mix to version 6 images referenced from the assets folder in Vue don’t err out on build but display as broken images in the browser.

Referencing images as such:

<img src="../assets/logo.png" alt="Logo">

When I inspect the image I see this:

<img src="[object Module]" alt="Logo">

Any help would be greatly appreciated. Thanks!

[tinyfly]

Apparently its a bug with vue-loader which Mix uses. Here is my workaround solution. This only sets esModule to false on the images file-loader.

mix.override(webpackConfig => {
  // BUG: vue-loader doesn't handle file-loader's default esModule:true setting properly causing
  // <img src="[object module]" /> to be output from vue templates.
  // WORKAROUND: Override mixs and turn off esModule support on images.
  // FIX: When vue-loader fixes their bug AND laravel-mix updates to the fixed version
  // this can be removed
  webpackConfig.module.rules.forEach(rule => {
    if (rule.test.toString() === '/(\\.(png|jpe?g|gif|webp)$|^((?!font).)*\\.svg$)/') {
      if (Array.isArray(rule.use)) {
        rule.use.forEach(ruleUse => {
          if (ruleUse.loader === 'file-loader') {
            ruleUse.options.esModule = false;
          }
        });
      }
    }
  });
});

[fylzero]

@Aiwings Thanks for the response.

I was also able to get the image loaded by doing this:

<img :src="require('./assets/logo.png').default" alt="Logo">

Both of these solutions feel kinda ugly to me tbh.