dom - Displaying a profile picture that is being fetched from Github

Question

I am a newbie and am attempting to display an image that is from my Github profile vs hardcoding it into the HTML. Currently, I have coded the following and the object is being displayed in my Javascript console.

const APIURL = 'https://api.github.com/users/'

getUser('JetimLee')


async function getUser(username) {
  try {
    const {
      data
    } = await axios(APIURL + username)

    console.log(data)
  } catch (err) {
    console.log(err)

 } 
}

My question is - how do I get the image from the profile to be displayed? Thank you so much in advance!

question from:https://stackoverflow.com/questions/65617722/displaying-a-profile-picture-that-is-being-fetched-from-github

Answer 1

You have an avatar_url field, set it's value as source of an image tag in your html.

Example:

const data = await axios('link');
const imgTag = document.getElementById('git-user-id');
imgTag.setAttribute('src', data.avatar_url);