如何在React中显示缓冲图像

发布于 2025-02-09 11:40:05 字数 847 浏览 4 评论 0原文

我是新的react，我有一个端点，将图像返回为缓冲区和文本，但是我有问题将缓冲区转换为img url并显示它，下面是我的代码

  <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>

段地图功能，什么都没有渲染，但是当我删除卷曲时，它会渲染值，但是我无法声明变量
谁能帮忙

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

囍孤女 2025-02-16 11:40:05

因为您的地图没有返回任何内容，因此您可以尝试在地图块中添加返回

       <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>

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>

回复收藏 0 原文

~没有更多了~