How do I use Avatar Image URLs from the Azure Devops API

Question

I'm currently working on a dashboard type application which interacts with the Azure Devops API using the C# client libraries. I connect like so:

var devOpsApi = new VssConnection(url, credentials);

And I can successfully retrieve the Team Image URLs when requesting project details:

var projectsClient = devOpsApi.GetClient<ProjectHttpClient>();
var projects = await projectsClient.GetProjects(getDefaultTeamImageUrl: true);

However, when I try to render this image in an <img> tag on my dashboard it does not display, and when inspecting the image in firefox I see the tooltip "Could not load the image". Clicking the link and Navigating directly to the image URL displays the image though.

Assumedly this is a permissions or CORS issue as when I try to view the page in incognito mode, the request gets redirected to the azure devops login page.

So to summarize: is there a way I can use these image URLs on a page that isn't azure devops?

Answer 1

We can not use the image URLs on a page that isn't Azure DevOps unless you provided the correct credential to login Azure DevOps first in that page.

Then you can get the image with REST API : Avatars - Get

Another similar thread for your reference : VSO REST API - Getting user profile image only works with basic authentication?