Hice el componente vue para mostrar solo una imagen.

He hecho npm build:lib y npm publish . Sin embargo, no pudo cargar la imagen, pero la marca como esta imagen

Además, descubrí que la ruta dentro del atributo src no era idéntica a la estructura de la carpeta node_modules/icon-test/dist en el proyecto donde instalé el componente.

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

Llevo varios días con este problema. Agradecería si alguien proporciona alguna información.

Mis archivos de componentes están a continuación:

estructura de archivos de componentes

componentes/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>

vistas/Inicio.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"); }, };