I am sending my photo from django as part of my JWT access_token payload with the intention to retrieve render and even update that image in my React app. Right now I'm focused on getting the image to show my custom user model. This is what my payload looks like when I decode it:

{
  "token_type": "access",
  "exp": ***,
  "iat": ***,
  "jti": "***",
  "user_id": 1,
  "username": "test",
  "first_name": "",
  "last_name": "",
  "country": "",
  "city": "",
  "bio": "",
  "photo": "\"profile/2022/03/27/testuserpic.png\""
}

I have tried to access the image using this code

let { user,logOutUser } = useContext(AuthContext)
            <img
              alt="..."
              className="avatar border-gray"
              src={`http://127.0.0.1:8000/media/${user.photo}`}
            />

but getting the error:

Failed to load resource: the server responded with a status of 500 (Internal Server Error)