CODEWITHSUNDEEP
javascripthtmlreactjsvue.jsvuejs3
RUNR
RUNR

Reputation: 21

How to create a dynamic URL in Vue 3?

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 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;
    }
  },

Thank you.

Upvotes: 1

Views: 1077

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Bind it using string template `` :

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

Upvotes: 3

Related Questions