Estoy usando la versión Vue 3.2.13. Estoy usando Avatares de DiceBear para mi aplicación para las fotos de perfil de los usuarios.
La URL para el punto final GET es:
https://avatars.dicebear.com/v2/avataaars/{{nombre de usuario}}.svg?options[estado de ánimo][]=feliz

Aquí cada cadena genera una imagen única y uso el nombre de usuario para generar un avatar único para cada usuario. El {nombre de usuario} en la URL es el marcador de posición para el nombre de usuario del usuario. Debe ser reemplazado dinámicamente por el nombre de usuario recibido del extremo de la API del usuario.
Entonces, la interfaz de usuario de muestra debería ser como la siguiente;
interfaz de usuario de muestra
Pero obtengo la misma imagen para diferentes nombres de usuario. Pero otros datos obtenidos correctamente colocados. Aquí está la interfaz de usuario que obtuve.
mi interfaz de usuario
Aquí está mi código;

 <div class="card" style="width: 18rem" v-for="(person, key) in people" :key="key"> <img class="card-img-top" src="https://avatars.dicebear.com/v2/avataaars/{{person.username}}.svg?options[mood][]=happy" alt="Card image cap" /> <h5 class="card-title"> {{ person.name }} </h5> <div class="card-text"> <i class="fa-solid fa-envelope"> </i> <p class="icon"> {{ person.email }} </p> <br /> <i class="fa-solid fa-phone"></i> <p class="icon"> {{ person.phone }} </p> <br />

 created: async function () { try { this.loading = true; let response = await UserService.getAllUsers(); this.people = response.data; this.loading = false; } catch (error) { this.errorMessage = error; this.loading = false; } },

Gracias.