Render image using image binary data

App.jsx

// GET DATA FROM DB
// SET DATA IN STATE
// MAP DATA ARRAY AND CONVERT IMAGE BINARY DATA TO BASE64
// USE IT TO CREATE A DATA URL IN IMAGE TAG

import React, { useEffect, useState } from "react"

const App = () => {
	const [data, setImageData] = useState([])
	const url = "http://localhost:4000/all"

	const getData = async (url) => {
		try {
			const res = await fetch(url)
			const data = await res.json()
			return data
		} catch (e) {
			console.error(e)
		}
	}
	
	useEffect(() => {
		getData(url).then((data) => setImageData(data))
	}, [url])

	return (
		<section className={styles.App}>
			{data &&
				data.map((item) => {
					return (
						<img key={item._id} src={`data:${item.mimeType};base64,${Buffer.from(item.data).toString("base64")}`} alt="asset" />
					)
				}
			)}
		</section>
	)
}

export default App