How can i display base64 string in <img/> tag in ReactJs-CodePudding

How can i do this? How do i display base64 string loaded as Json to an image / picture controller in React JS? i am trying to display the base64 string as image, in an tag, it does not display.

the base64 string is saved in my database exactly like this

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

This code fetches the code from the 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);
    })
},[]);

This works fine, No issue

the code to display the image is looking thus :

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

Is there something i am not doing rightly?

CodePudding user response：

This should be enough:

           <img 
                border="0" 
                src={post.base64str} 
                width="100%" height="100%" 
                className="photoMain" 
           />

CodePudding user response：

i Fixed it again.

base64str varchar(255) NOT NULL,

Changing to

base64str VARCHAR(65538) NOT NULL,

Helped me resolve it. Thanks everyone.