With the photo URL routes set up to retrieve the photo, we can simply use these in the img element's src attribute to load the photo in the view. For example, in the Profile component, we get the user ID from state and use it to construct the photo URL.
mern-social/client/user/Profile.js:
const photoUrl = this.state.user._id ? `/api/users/photo/${this.state.user._id}?${new Date().getTime()}` : '/api/users/defaultphoto'
To ensure the img element reloads in the Profile view after the photo is updated in the edit, we also add a time value to the photo URL to bypass the browser's default image caching behavior.
Then, we can set the photoUrl to the Material-UI Avatar component, which renders the linked image in the view: ...
