Visualizar y editar la imagen de portada
Presentación
Firebase Auth
Cloud Firestore
Cloud Storage
Cloud Functions
Curso Firebase para Web se encuentra en desarrollo. Vuelve pronto para encontrar nuevas lecciones.
- Para mostrar la imagen de portada tendremos que ajustar el componente
RoomsComponent.vue
de forma adecuada. - Por ejemplo podemos crear un método que decida qué imagen utilizar (por defecto o seleccionada por el usuario/a).
roomImage(roomId) {
const room = this.rooms.find(room => room.id === roomId);
return room.image ? room.image : require("@/assets/img/room-image.jpg");
}
- En cuanto a la posibilidad de edición de la imagen de portada, se trata de repicar casi en su totalidad las mecánicas que integramos en la última lección, es decir, ajustar la acción y método local
updateRoom
. - En la acción sólo tenemos que añadir la imágen como propiedad del objeto que representa los datos de la sala de conversación.
async updateRoom(context, { roomID, name, description, image }) {
...
roomData.image = image;
...
},
- Y en el método local tendremos que añadir las nuevas funciones.
async updateRoom() {
...
try {
if (this.image) {
this.imageURL = await this.$store.dispatch("rooms/uploadRoomImage", {
file: this.image,
roomID: this.id
});
}
...
}
},
Código inicial
¿Tienes alguna pregunta sobre esta lección de Curso Firebase para Web?
Resuelve todas tus dudas sobre Firebase en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.
Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.