How to fetch doctor/patient profile pic/image via api and display in 3rd part react web app ?
To fetch and display a doctor or patient profile image via API in a third-party React web app, follow these steps:
- Ensure API Endpoint Provides Image URL or Image Data
The backend API should provide a URL to the image or send the image as base64-encoded data in the response. Make sure the API provides a route to fetch the image for a given doctor or patient.
For example, if the image URL is stored in the user’s profile data, the backend API might have an endpoint like this:
{
“id”: 1,
“name”: “Dr. John Doe”,
“profile_image_url”: “https://example.com/images/doctor1.jpg”
}
Alternatively, if the image is provided as base64 data, it might look like this:
{
“id”: 1,
“name”: “Dr. John Doe”,
“profile_image_base64”: “/9j/4AAQSkZJRgABAQEAAAABAAEAAA…”
}
- Fetch Image from API in React
You can use axios or fetch to call the API and get the image URL or base64 data.
Example 1: Using the Image URL
import React, { useState, useEffect } from ‘react’;
import axios from ‘axios’;
const ProfilePic = ({ userId }) => {
const [profileImageUrl, setProfileImageUrl] = useState(null);
useEffect(() => {
const fetchProfileImage = async () => {
try {
const response = await axios.get(`https://example.com/api/users/${userId}`);
setProfileImageUrl(response.data.profile_image_url);
} catch (error) {
console.error('Error fetching profile image:', error);
}
};
fetchProfileImage();
}, [userId]);
if (!profileImageUrl) {
return <div>Loading...</div>;
}
return ;
};
export default ProfilePic;
Example 2: Using Base64 Data
import React, { useState, useEffect } from ‘react’;
import axios from ‘axios’;
const ProfilePic = ({ userId }) => {
const [profileImageBase64, setProfileImageBase64] = useState(null);
useEffect(() => {
const fetchProfileImage = async () => {
try {
const response = await axios.get(`https://example.com/api/users/${userId}`);
setProfileImageBase64(response.data.profile_image_base64);
} catch (error) {
console.error('Error fetching profile image:', error);
}
};
fetchProfileImage();
}, [userId]);
if (!profileImageBase64) {
return <div>Loading...</div>;
}
return <img src={data:image/jpeg;base64,${profileImageBase64}} alt=“Profile” />;
};
export default ProfilePic;
- Styling the Image (Optional)
You can style the image as needed using CSS or inline styles to control its size, borders, or shape.
<img
src={profileImageUrl} // or base64
alt=“Profile”
style={{ width: ‘150px’, height: ‘150px’, borderRadius: ‘50%’ }}
/>
- Make Sure the API Allows CORS
If the React app is on a different domain than your backend API, ensure that CORS (Cross-Origin Resource Sharing) is properly configured on the backend API so that the React app can access it.
In Express.js, for example, you can enable CORS like this:
const cors = require(‘cors’);
app.use(cors());
- Display the Image in the React App
You can now use the ProfilePic component wherever you need to display a profile image in the app:
Conclusion
This approach allows you to fetch a doctor/patient profile image from the API and display it in your third-party React web app.
We are using this for us.