An Interest In:
Web News this Week
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
Some of Our Sources
- BoingBoing
- Engadget
- Team Treehouse
- Just Creative
- Web Designer Depot
- CSS Globe
- Spyre Studios
- Freelance Switch
- Dev To
- The Verge
Help Webnuz
Referal links:
December 8, 2022 10:43 am GMT
Original Link: https://dev.to/amanp30/show-image-in-react-js-from-mongodb-data-1kc
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, })} />Original Link: https://dev.to/amanp30/show-image-in-react-js-from-mongodb-data-1kc
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To