Saltar al contenido

¿Cómo importar y usar una imagen en un componente de archivo único de Vue?

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.

¡Haz clic para puntuar esta entrada!
(Votos: 2 Promedio: 5)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *