0

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:

Antes de cambiar la imagen de perfil

Ahi está la imagen anterioir antes de cambiarla

Después de haberla cambiado, mientras el nuxt compila

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

El mensaje de Error

Aquí ya el nuxt terminó de compilar y la imagen actualizada se muestra

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ó

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)

Errores con before update

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

1 respuesta 1

1

Si he entendido bien subes la imagen al servidor y se guarda en el directorio "/assets" ese directorio te va a dar problemas por que fuerza una recompilación. En tu instalación de Nuxt en el directorio raiz has de tener una carpeta "static" guarda en ese directorio las imágenes que subas al servidor.

Y para hacer referencia a las mismas en tu plantilla:

En vez de esto:

<img
alt="Imagen de Perfil"
:src="require(`~/assets${user.user_image}`)"
/>

Usas esto:

<img
alt="Imagen de Perfil"
:src="`/${user.user_image}`"
/>
1
  • Pues acabo de probar ésto y funcionó a la perfección, depués de varios días !!!
    – DDBCDVD
    Commented el 20 ene. 2021 a las 23:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.