I made vue component to display just an image.

I've done npm build:lib and npm publish it. However, it couldn't load the image, but the mark like this picture

Also, I found that path inside src attribute was not identical with node_modules/icon-test/dist folder's structure in the project where I installed the component.

<img data-v-43101371="" alt="cat" src="http://localhost:8081/js/73b12abfb4c55c5d8c687fd31d469762.jpg">

I've been stuck with this issue several days. I'd appreciate if anyone provide some information.

My component files are below:

component file structure

components/CatImage.vue:

<template>
  <div class="hello">
    <img alt="cat" :src="showCat" />
  </div>
</template>

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

export default class CatImage extends Vue {
  private showCat: string = require("@/assets/img/cat.jpg");
}
</script>

views/Home.vue

<template>
  <div class="home">
    <CatImage />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import CatImage from "@/components/CatImage.vue";

@Component({
  components: {
    CatImage,
  },
})
export default class Home extends Vue {}
</script>

vue.config.js

module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule("images")
      .test(/\.(png|jpg|jpe?g|gif|webp)(\?.*)?$/)
      .use("file-loader")
      .loader("file-loader")
      .options({
        name: "[name].[ext]",
        outputPath: "assets/img/",
      })
      .end();
    config.module.rule("images").use("url-loader").loader("file-loader");
  },
};