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
});
}
...
}
},
El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.
¿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.