I'm building a reactJS app and I'm trying to retrieve the user's profile picture from their outlook account.
Reading Outlook's documentation I can use the below URL to get that photo (replacing EMAILHERE
with the user's email):
https://outlook.office.com/owa/service.svc/s/GetPersonaPhoto?email=EMAILHERE&UA=0&size=HR64x64
However, if the user does NOT have a profile picture set, it will return a 1x1 image.
In my React app I want to display the user's image if it exists, if not use a generic image ({this.addDefaultSrc}
). However, since even if the user does not have a profile picture set, it still returns a 1x1 image, how can I accomplish this?
Can I check to see how big the image is and if its over 1x1 then return? Since the URL does not return a error, I'm not sure what other creative ways there are to accomplish this.
Here is my current code:
<div className={styles.chatBody}>
<h6>Chat Window</h6>
{chatArray.map((item,i) =>
<div className={`${styles.answer} ${styles.left}`}>
<div className={styles.avatar}>
<img onError={this.addDefaultSrc} src="https://outlook.office.com/owa/service.svc/s/GetPersonaPhoto?email=EMAILHERE&UA=0&size=HR240x240&sc=1612564823453" alt="User name" />
</div>
<div className={styles.name}>{item.userName}</div>
<div className={styles.text}>{item.message}</div>
<div className={styles.time}>{item.time}</div>
</div>
)}
</div>
addDefaultSrc(ev){
//Code Here to check onError (not sure if it will ever be on error since returns 1X1)
ev.target.src = 'location-to-backup-image-here'
}