refresca imagen

src/pages/IndexPage.vue

@@ -13,16 +13,7 @@
     </div>
     <div class="col-12 flex flex-center">
       <q-avatar size="96px">
-        <img
-          :src="
-            listaStore.pb.authStore.model.avatar.length > 0
-              ? listaStore.pb.getFileUrl(
-                  listaStore.pb.authStore.model,
-                  listaStore.pb.authStore.model.avatar
-                )
-              : `https://cdn.quasar.dev/img/avatar.png`
-          "
-        />
+        <q-img :src="fuenteImagen" />
       </q-avatar>
     </div>
   </div>
@@ -107,12 +98,13 @@
   </q-dialog>
 </template>
 <script setup>
-import { ref, computed } from "vue";
+import { ref, computed, onMounted } from "vue";
 import { useListaStore } from "../stores/lista.js";
 
 const listaStore = useListaStore();
 
 const imagen = ref(null);
+const fuenteImagen = ref(null);
 const username = ref(listaStore.pb.authStore.model.username);
 const name = ref(listaStore.pb.authStore.model.name);
 const alertSave = ref(false);
@@ -138,6 +130,7 @@ const updateUser = async () => {
   recibeDatos();
 };
 const cargarDatos = () => {
+  refrescarImagen();
   imagen.value = null;
   username.value = listaStore.pb.authStore.model.username.trim();
   name.value = listaStore.pb.authStore.model.name.trim();
@@ -177,4 +170,18 @@ const btnSaveDisable = () => {
   }
   return false;
 };
+
+const refrescarImagen = () => {
+  if (listaStore.pb.authStore.model.avatar.length > 0) {
+    fuenteImagen.value = listaStore.pb.getFileUrl(
+      listaStore.pb.authStore.model,
+      listaStore.pb.authStore.model.avatar
+    );
+  } else {
+    fuenteImagen.value = `https://cdn.quasar.dev/img/avatar.png`;
+  }
+};
+onMounted(() => {
+  refrescarImagen();
+});
 </script>