Getting Outlook profile image in Vue as v-img src

Question

I am trying to create a profile image that changes, depending on who is logged in so I cannot hardcode the email into the url

how would i go about this

html

<v-avatar size="128" absolute color="secondary">
    <v-img:src="`https://outlook.office.com/api/v2.0/Users${email}/photo/$value`" />
</v-avatar>

computed

email() {
    return this.staffMember.WorkEmail
},

Email is returned as devan@bsuregroup.co.za but no image is being displayed

Answer 1

According to the API docs URL you need to query for photo looks like this:

GET https://outlook.office.com/api/v2.0/Users('{user_id}')/photo/$value

You need to change your URL in the v-img element:

<v-avatar size="128" absolute color="secondary">
    <v-img:src="`https://outlook.office.com/api/v2.0/Users(${email})/photo/$value`" />
</v-avatar>