I'm using Vue 3.2.13 version. I am using Avatars by DiceBear for my application for users' profile pictures.
The URL for the GET endpoint is:
https://avatars.dicebear.com/v2/avataaars/{{username}}.svg?options[mood][]=happy

Here each string generates a unique image and I use the username to generate a unique avatar for each user. The {username} in the URL is the placeholder for the user's username. It should be dynamically replaced by the username received from the user's API endpoint.
So the sample UI should be like the following;
sample UI
But I get the same image for different usernames. But other fetched data properly placed. Here is the UI I got.
my UI
Here is my code;

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

            <i ></i>
            <p >
              {{ 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;
    }
  },

Thank you.

CodePudding user response：

Bind it using string template `` :

:src="`https://avatars.dicebear.com/v2/avataaars/${person.username}.svg?options[mood][]=happy`"