DEV Community

OlaNeat Ayoola
OlaNeat Ayoola

Posted on

How can i convert buffer to img url in react

Good day
i'm new with react and i have an endpoint that returns image as buffer and text, but i'm having issue converting that buffer to img url and displaying it, below is my code snippet
<div className={newsStyle.container}>
<ul >
{ => {
const Base64string = btoa(
String.fromCharCode(... new Uint8Array(news?.img?.data?.data))
<li key={news._id}>
<div className={newsStyle.index}>
<img src={
data: image/png; base64, ${Base64string}`} />




Enter fullscreen mode Exit fullscreen mode

now the issue is with the curly bracket in the map function, nothing is rendered, but when i remove the curly it render value, but i wont b able to declare a variable
can anyone help out

Top comments (2)

link2twenty profile image
Andrew Bone

It doesn't look like you're returning anything from the map.

export function SomeThing({ array }) {

  return (
      { => {
        const value = `${item} - default`;

        return <input defaultValue={value} />
Enter fullscreen mode Exit fullscreen mode

Map makes a new array based on what the function inside it returns.

olaneat profile image
OlaNeat Ayoola