how to display buffer images in react

Question

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}`} />
                            <p className={newsStyle.txt}>{news.title}</p>

                        </div>


                    </li>
                })}
            </ul>

        </div>

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

score 0 · Answer 1 · answered Jun 22 '22 at 04:56

Because your map does not return anything, you can try add a return inside the map block

       <ul >
            {newsItem.map((news) => {
                const Base64string = btoa(
                    String.fromCharCode(... new Uint8Array(news?.img?.data?.data))
                );
                return (<li key={news._id}>
                    <div className={newsStyle.index}>
                        <img src={`data: image/png; base64, ${Base64string}`} />
                        <p className={newsStyle.txt}>{news.title}</p>

                    </div>


                </li>)
            })}
        </ul>

how to display buffer images in react

1 Answers1