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

sharanappa_m profile image

Understanding React Router: A Step-by-Step Guide for Beginners

Sharanappa -

krishna7852 profile image

Optimizing React Development with Vite🤩

Krishna Bhamare -

devxme profile image

HubSpot offers a powerful platform for creating user interfaces (UI) and serverless functions using React, allowing users to develop highly customizable pages and forms directly within the CRM itself.

Mario Dias -

sebastienlorber profile image

This Week In React #214 : Base UI, Custom Elements, Next.js, React Router, Android XR, iOS targets, Nitro, RNTL...

Sebastien Lorber -