Crea una cuenta y continúa aprendiendo 🚀

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.

Agregar un Logo a Nuestra Aplicación

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.

Ubicación del `app-bar`

Nuestro app-bar se encuentra dentro de un componente TopBar. Este componente contiene un v-avatar con estas características.

Modificación del `v-avatar`

Vamos a modificar el contenido de este v-avatar y definiremos un v-image. Este v-image tendrá una directiva source, y aquí simplemente mostraremos nuestro logo.

Ubicación del 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.

Eliminación del Atributo `color`

De la misma manera, voy a quitar este atributo color porque le estaba dando un color al avatar.

En este caso, no queremos un color fijo, sino una imagen.

Corrección del Componente

Hay que tener cuidado porque el componente no es v-image, sino v-img. Guardamos y aquí lo tenemos.

Conclusión

De esta manera, puedes poner el logo de tu página. No olvides de siempre ir subiendo tus cambios.

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 pregunta

¡Comparte conocimiento!

Volver al índice

Regístrate

Inicia sesión para llevar un control de tu progreso.

Capítulos

Introducción al curso

Probar Vue rápidamente

Crear nuevo proyecto

IDE y extensiones

Instalar Visual Studio Code