Espera un momento ...
¿Te gustaría llevar mi curso de Laravel, gratis?
Sólo debes ingresar tus datos:
¡Suscríbete y continúa aprendiendo!
Esta lección está disponible únicamente para suscriptores.
Regístrate o inicia sesión para continuar aprendiendo:
Frontend
Aprendiz
Logo: avatar & img
Veamos rápidamente cómo agregar un logo para nuestra página, aprovechando los componentes v-avatar y v-img.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
Ya que estamos haciendo mejoras de diseño, vamos a aprovechar para ponerle un logo a nuestra aplicación. Para modificar este círculo, tenemos que dirigirnos a nuestro app-bar. Nuestro app-bar se encuentra dentro de un componente TopBar. Este componente contiene un v-avatar con estas características. Vamos entonces nosotros a modificar el contenido de este v-avatar y vamos a definir aquí un v-image. Este v-image tendrá una directiva source y vamos aquí simplemente a mostrar nuestro logo. Para que esto funcione, asegúrate de dejar en tu carpeta public tu logo. En este caso lo llamaré logo.jpg y entonces aquí escribiré logo.jpg. De la misma manera voy a quitar este atributo color porque le estaba dando un color al avatar y en este caso no queremos un color fijo, queremos más bien una imagen. Hay que tener cuidado aquí también porque el componente no es v-image, es v-img. Guardamos y aquí lo tenemos. Entonces tú de esta manera puedes poner el logo de tu página. Y no olvides de siempre ir subiendo tus cambios.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
06
08
09
30
35
38
44
48
49
56
79
81
82
84
89
Logo: avatar & img
99
107
112
119
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript