时间戳

首页 > 解决方案 > 如何在 ReactJs 的标签中显示 base64 字符串

reactjs - 如何在 ReactJs 的标签中显示 base64 字符串

问题描述

我怎样才能做到这一点？如何将作为 Json 加载的 base64 字符串显示到 React JS 中的图像/图片控制器？我正在尝试将 base64 字符串显示为图像，在标签中，它不显示。

base64 字符串完全像这样保存在我的数据库中

'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAiwAAAGlCAIAAABWQjozAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAIzpSURBVHhe7b1tzGVXdedZX6fn88yHfBglUiufZhToiRAZWoEERgmZiUI0otXKi9yR0wwfBkaOR6mxcYzVbkLPEMWm/ATSaQhFqTOxUz0Vp5yexFQZQ+xOE'

此代码从 REST api 获取代码

useEffect(() =>{
    let userId =  localStorage.getItem('userinfo');
    fetch('https://m2d3srv.herokuapp.com/api/posts/'+userId,
    {
        method: 'GET',
        mode : 'cors',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
    }).then((response)=> response.json())
    .then((responseJson) =>{
        setPosts(responseJson.data);
    })
},[]);

这工作正常，没问题

显示图像的代码是这样的：

                <tr>
                    <td height="428">
                    <p align="center"/>
                    <img border="0" src={URL.createObjectURL(`post.base64str`)} width="100%" height="100%" className="photoMain" />
                    </td>
                </tr>

有什么我做的不对吗？

标签： reactjsrestbase64

解决方案

我又修好了。

base64str varchar(255) NOT NULL,

更改为

base64str VARCHAR(65538) NOT NULL,

帮我解决了。感谢大家。

推荐阅读