Tengo un problema al mostrar y actualizar una imagen en un componente de Nuxt, es decir, un componente de Vue.
Después de que el usuario inicia sesión, en el layout default se ejecuta el action del store para cargar los datos del usuario logueado de manea que esos datos estén disponibles con el getter del componente que está dentro del layout default:
layouts/default.vue:
<template>
<v-app>
<div align="left"><GeneralSettings /></div>
</v-app>
</template>
<script>
import GeneralSettings from '~/components/core/GeneralSettings.vue'
export default {
components: {
GeneralSettings,
},
created() {
this.loadUser()
},
methods: {
// Usuario Logueado
loadUser() {
this.$store.dispatch('loadUser')
}
}
},
</script>
Éste componente se muestra mediante un dialog de vuetify que trae la imagen de perfil del usuario autenticado y tiene también un formulario donde el usuario puede actualizar sus datos, entre ellos, cambiar su imagen de perfil. Al presionar un botón se abre éste dialog, és decir se muestra el componente. Como dije, dentro de dicho componente muestro la imagen de perfil con :src="require(`~/assets${user.user_image}`)
, donde user es el valor que viene del getter:
componente: /components/core/GeneralSettings.vue
<div v-if="user.user_image">
<v-hover v-slot="{ hover }">
<v-avatar size="120" color="white">
<img
alt="Imagen de Perfil"
:src="require(`~/assets${user.user_image}`)"
/>
<v-expand-transition>
<div
v-if="hover"
class="d-flex transition-fast-in-fast-out white darken-2 v-card--reveal display-3 white--text"
>
<v-btn
align="center"
justify="space-around"
text
color="trasnparent"
@click="dialogs.updateImage = true"
>
<v-icon dark> mdi-camera-outline</v-icon>
</v-btn>
</div>
</v-expand-transition>
</v-avatar>
</v-hover>
</div>
<div v-else>Cargando...</div>
Como dije, allí tengo un formulario donde cambio la imagen del perfil con axios, y cuando la respuesta es positiva, entonces ejecuto el dispatch loadUser del store para actualizar los datos y que el getter los tome y devuelva el nombre de la imagen en el componente para refrescar la imagen.
formulario:
<v-card
:aspect-ratio="16 / 9"
loading="light-blue darken-1"
elevation="24"
shaped
>
<v-responsive>
<v-card-title>Cambiar imagen de Perfil</v-card-title>
<v-card-subtitle
>Seleccione una imagen desde la computadora
</v-card-subtitle>
<validation-observer ref="observer" v-slot="{ invalid }">
<v-form enctype="multipart/form-data" @submit="updateImage">
<v-container>
<v-row>
<v-col cols="12" md="12">
<validation-provider
v-slot="{ errors }"
name="Imagen de Perfil"
rules="required|size:5000000"
>
<v-file-input
:error-messages="errors"
accept="image/png, image/jpeg, image/bmp"
placeholder="Seleccione su Imagen de Perfil"
prepend-icon="mdi-camera"
required
@change="OnFileSelected"
></v-file-input>
</validation-provider>
</v-col>
</v-row>
<v-card-actions>
<v-btn
type="submit"
text
color="blue darken-1"
:disabled="invalid"
@click="dialogs.updateImage = false"
>Cambiar</v-btn
>
<v-spacer></v-spacer>
<v-btn text color="red" @click="dialogs.updateImage = false"
>Volver</v-btn
>
</v-card-actions>
</v-container>
</v-form>
</validation-observer>
</v-responsive>
</v-card>
Script :
<script>
// VUEX
import { mapGetters } from 'vuex'
// AXIOS
import axios from 'axios'
export default {
data() {
return {
file: {
user_image: [],
},
}
},
computed: {
...mapGetters({
// Datos del usuario
user: 'getUser',
}),
},
methods: {
OnFileSelected(evt) {
this.file.user_image = evt
},
updateImage(evt) {
// Cambiar imagen de Perfil
this.$refs.observer.validate()
const userID = this.$auth.user.id
evt.preventDefault()
const fd = new FormData()
fd.append('user_image', this.file.user_image, this.file.user_image.name)
const path = `http://localhost:8000/api/core/Users/DetailUser/${userID}`
axios
.patch(path, fd, {
headers: {
'Content-Type': 'multipart/form-data',
Authorization: this.$auth.$storage._state['_token.local'],
},
})
.then((response) => {
this.loadUser()
this.$toast.success(
'Imagen de perfil actualizada satisfactoriamente, espere mientras se guardan los cambios...'
)
})
},
loadUser() {
// Cargar los datos del usuario en la vista
// una vez modificados
this.$store.dispatch('loadUser')
},
},
}
</script>
El problema es que cuando recibo respuesta positiva del axios al cambiar la imagen, ejecuto el loadUser() y el getter para actualizar el nombre de la imagen en la página, PERO Nuxt recibe el archivo de la imagen como un archivo nuevo y DESPUÉS compila.
Entonces mientras Nuxt está compilando, el loadUser() ya actualizó en el store el nombre de la imagen y el getter toma ese nombre actualizado y lo monta en el componente, en :src="require(`~/assets${user.user_image}`)
.
Pero como el Nuxt debe compilarse ya que recibió un archivo nuevo (la imagen), ésta imagen aunque tiene nombre correcto y actualizado en user.user_image
, no "existe" aún para nuxt, y en ese lapso de tiempo en que nuxt está compilando, el componente no consigue la imagen y por lo tanto tira la página de error por defecto de nuxt, ya que como dije, aunque el nombre de la imagen es correcto, la imagen en sí aún no existe para nuxt hasta que éste termine de compilarse.
Lo extraño de todo es que cuando nuxt termina de compilarse, la imagen sí se actualiza PERO debido al error previo en el que no la conseguía, pues me crashea la aplicación, adjunto capturas:
Ahi está la imagen anterioir antes de cambiarla
Después de haberla cambiado, mientras el nuxt compila
Como pueden ver, en la consola del navegador ya me tiró error porque no consigue la imagen ya que el loaduser() y el getter actualizaron el nombre
El mensaje de Error
Aqui ya el nuxt terminó de compilar y la imagen actualizada se muestra
Pero debido al error de la segunda imagen ya la aplicación se crasheó
Ésto logré resolverlo en una page normal usando beforeUpdate(), allí tengo la misma funcionalidad con la imagen y el formulario. Allí cambio mi imagen sin problemas y en el beforeUpdate() ejecuto this.$store.dispatch('loadUser')
para recargar los datos entre ellos el nombre de la imagen y no tengo ningún problema.
Pero en el componente no puedo usar beforeUpdate() o updated() para actualizar el elemento como lo hice en el page normal, pues cuando lo he intentado ejecuta el this.$store.dispatch('loadUser')
varias veces por segundo, supongo que porque está el getter y se pone lento el servidor (espero haberme explicado, adjunto captura de ésto)
Ese 111 que se ven allí, fueron las veces que se ejecutó
beforeUpdate() {
this.loadUser()
},
en apenas 2 segundos, y ya todo el servidor se pone lento evidentemente, de manera que en el componente no puedo usar beforeUpdate() ni updated() porque el resultado es el mismo,
Quisiera saber como puedo recargar el componente desde dentro de mismo componente. Es decir, en vez de ejecutar el loaduser() al recibir la repuesta del axios, quisiera más bien recargar todo el componente, o usar destroy() y volverlo a crear, pero ésto no he logrado hacerlo, o utlizar lo que sea que me recargue el componente.
Recuerden que como escribí más arriba, el layout/default.vue también ejecuta el loaduser(), así que si dentro del componente sólo ejecuto alguna función para recargarlo o re-renderizarlo de alguna manera, creo que funcionaría.
He tratado de usar this.$refs.$forceUpdate()
pero simplemente no hace nada.
O no sé si alguno ha trabajado con manejo de imágenes con Nuxt y hay una mejor manera de hacerlo, o alguna librería o pienso que quizá cuando el proyecto pase a producción entonces Nuxt no va a necesitar compilarse pero la verdad no lo sé...
Espero haberme explicado, espero puedan ayudarme