Vue.js + webpackで画像表示されない

使用バージョン

$ npm list vue webpack
app@1.0.0
├── vue@2.6.11
└── webpack@4.41.6

問題

webpackでurl-loaderを使い画像バンドルしたが表示できない。

画像ファイルはsrc/assets/直下に格納している。
componentやentry.tsなどはsrc/typescripts以下。
app
└── src
           ├── assets
           └── typescripts

Img.vue

<template>
  <img :src="imgPath" />
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class Img extends Vue {
  public imgPath = '@/assets/no_image.png'
}
</script>

webpack.config.js

{
  test: /\.(gif|png|jpg)$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 8192,
      }
    }
  ]
},

解決

まず読み込み方を変更。

Img.vue

public imgPath = require('@/assets/no_image.png')

https://greko-engineer.hateblo.jp/entry/2020/03/05/231242

しかしまだ表示されず。。！
デベロッパーツールでimgタグのsrcを見ると[object Module]を参照している！
そこでurl-loaderのオプションにesModule: falseを追加。

webpack.config.js

{
  test: /\.(gif|png|jpg)$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 8192,
        esModule: false
      }
    }
  ]
},

https://stackoverflow.com/questions/59070216/webpack-file-loader-outputs-object-module
https://webpack.js.org/loaders/url-loader/#esmodule

表示されました！