Show image in react js from mongoDB data

Let say we fetching data from mongodb and storing the data in the values in react

Full example => here we have image in buffer so we use this imagefrombuffer package to convert buffer data to base64.

import React, { useEffect } from "react";
import { imagefrombuffer } from "imagefrombuffer"; //first import 

function author() {
  const [values, setvalues] = useState([]); // data

  const fetchauthor = async (e) => {
    let config = {
      method: "get",
      url: "http://localhost:8000/api/user/authorfind",
      headers: {
        Authorization: `Bearer ${thetoken()}`,
      },
    };

    await axios(config)
      .then((response) => {
        setvalues(response.data[0]); //setting data into values
        console.log(response.data);
      })
      .catch((error) => {
        console.log(error);
      });
  };
  useEffect(() => {
    fetchauthor();
  }, []);
  return (
    <>
   // imagefrombuffer  function usage to show image in react or next js from buffer
      <img 
        src={imagefrombuffer({
          type: values.profilephoto?.contentType,
          data: values.profilephoto?.data?.data,
        })}
      />
    </>
  );
}

export default author;

use the function

<img src={imagefrombuffer({
          type: values.profilephoto?.contentType,
          data: values.profilephoto?.data?.data,
        })}
      />

Comments

[Aman Pareek]

ansdgjn

[Aman Pareek]

another one

[Aman Pareek]

[Aman Pareek]

test comment

[Aman Pareek]

best one

[Aman Pareek]

mkasmdgk

[Aman Pareek]

ansdgnjasg