Te traemos la contestación a este inconveniente, al menos eso creemos. Si tienes alguna duda coméntalo y sin tardar
Solución:
Tan simple como:
Tomado del proyecto generado por vue cli.
Si desea utilizar su imagen como módulo, no olvide vincular los datos a su componente Vuejs:
Y una versión más corta:
Se recomienda encarecidamente utilizar el paquete web al importar imágenes de activos y, en general, con fines de optimización y ruta.
Si desea cargarlos por paquete web, simplemente puede usar :src='require('path/to/file')'
Asegúrate de usar :
de lo contrario, no ejecutará la instrucción require como Javascript.
En mecanografiado puedes hacer casi exactamente la misma operación: :src="require('@/assets/image.png')"
Por qué lo siguiente generalmente se considera una mala práctica:
Al compilar con Vue cli, webpack no puede garantizar que el archivo de activos mantenga una estructura que siga a la importación relativa. Esto se debe a que el paquete web intenta optimizar y fragmentar los elementos que aparecen dentro de la carpeta de activos. Si desea utilizar una importación relativa, debe hacerlo desde dentro de la static
carpeta y uso:
Encontré este problema recientemente y estoy usando Typescript. Si está usando Typescript como yo, entonces necesita importar activos de esta manera:
Aquí puedes ver las reseñas y valoraciones de los lectores
Recuerda que te brindamos la opción de explicar si te fue de ayuda.