1

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'
}
hisusu32
  • 437
  • 7
  • 22
  • FYI: https://stackoverflow.com/a/20569043/1207049 You can also load an image to CanvasRenderingContext2D and get ImageData. – marekful Feb 09 '21 at 17:17

0 Answers0