DEV Community

OlaNeat Ayoola
OlaNeat Ayoola

Posted on

How can i convert buffer to img url in react

#question #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 >
{newsItem.map((news) => {
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}`} />

{news.title}

                    </div>


                </li>
            })}
        </ul>

    </div>
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)

Collapse
 
link2twenty profile image
Andrew Bone •

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

export function SomeThing({ array }) {

  return (
    <div>
      {array.map((item) => {
        const value = `${item} - default`;

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

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

Collapse
 
olaneat profile image
OlaNeat Ayoola •

tnks

Read next

prashant-ardeshana profile image

#3 How to fetch the store details and print to the fronted using react Next.

Prashant Ardeshana -

basskibo profile image

How to embed link with preview in React Application

Bojan Jagetic -

joaoalissonsilva profile image

Advanced State Management in React

João Alisson -

drprime01 profile image

How to Validate File Inputs in TypeScript with Zod

DrPrime01 -