Full-Stack React Projects - Second Edition

Showing a photo in a view

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 use the user ID from the values in the state to construct the photo URL, as shown in the following code.

mern-social/client/user/Profile.js:

const photoUrl = values.user._id      ? `/api/users/photo/${values.user._id}?${new Date().getTime()}`      : '/api/users/defaultphoto'

To ensure the img element reloads in the Profile view after the photo is updated, we have to 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 ...