Here you append the data: URL scheme prefix and the content type and fact it is encoded in base64 to the base64 data.
this.setState({base64File: "data:image/png;base64," + img});
(Assuming that https://localhost:44348/api/user/GetFirstImage returns base64 encoded data rather than the more typical binary data of an image. If it doesn't then you have an extra problem and you need to encode the image).
Then here:
<img src={{uri: `data:image/gif;base64,${this.state.base64File}`}} />
You append the data: URL scheme prefix and the content type and fact it is encoded in base64 to the URL.
So now you have the preamble applied to the data twice which is will break it.
You also can't seem to make up your mind if the image is a GIF or a JPEG. You need to set the correct content-type!
Also, you are trying to set the src attribute to an Object instead of a String. It will get converted to a string — "[object Object]" — which will break it in yet another way.
This seems to be a very complex approach to the problem though. Is there a reason you aren't serving up a traditional image (instead of base64 data) from https://localhost:44348/api/user/GetFirstImage and just setting the src to that URL itself:
this.setState({imageUrl: "https://localhost:44348/api/user/GetFirstImage"});
...
<img src={this.state.imageUrl} />
Did you make sure to add the encoding type in the src attribute along with the base64 encoded value?
render(){
{this.state.image ? <img src={`data:image/png;base64,${this.state.image}`}/>: ''}
}
const byteCharacters = atob(result);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
let image = new Blob([byteArray], { type: 'image/jpeg' });
Once you have the Blob you need to convert that into a data url like this:
let imageUrl = URL.createObjectURL(image);
this.setState({image: imageUrl});
now u can use this url saved in your state as a source for image like this:
<img src={this.state.image} />
Hope this helps!!
Worked for me like a charm
<Image style={styles.imgstyle} source={{uri: "data:image/png;base64,"+this.state.upic}} />
With the base64 string generated chk here if t is a valid string. https://www.base64decode.net/base64-image-decoder.
Second pass the base 64 as a post body parameter instead of URL params.
Third check the response of the api if it returns the valid base64 string again which can be decoded to an image using the web link shared above.
If all this works, there shouldn't be a problem in rendering it in the app as code seems to be ok.
I believe you are missing an equals sign at the end of your base64 URL.
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCABQAFADASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAgEAAwn/xAAtEAEAAgEEAQMCBgEFAAAAAAABAhEAAxIhMSJBUWETcSOBkaHB8UIyYrHR4f/EABcBAQEBAQAAAAAAAAAAAAAAAAABAgP/xAAWEQEBAQAAAAAAAAAAAAAAAAAAARH/2gAMAwEAAhEDEQA/APS3aymVIvvFHaRnxTdrglUXdfESr6zRgmrI3dexd8D/ADm3Ios9S5xYUpEs/fIbGc7h5HF9fnmPCfAPq21l1NstS4yFS6vAMtmnzLeP+1vHE8yciiVU/lhWwCHdcvpzi37nZOHIKpx9sAar5ty2h3fr7ZoeMa7Rv5PtmgQk2+XveWZTScPdcvx9sCyYBKSrOy4y65zOnppGUVG6CHAZb8baU9O+PlzRJTLNM2F2rX6YBjP6lkplSX4xyTfKTIkP7cB/GcxfpR43+/xlj9OPOoRCJZZ64BjC2U5abE49PT3yyhVSixRb+xl3T1NPcUL7Pp7VmjHj3964+2A0qLKx9+c5z1HuJ5dvz/1j0yNJVN+N+uHU05zZRaDi6wMxW4w5kyeD4/vJJ21Pyiy4pO6xq9RiLJW3CwkR3NsvV7r8sBacSMpXpqJZG+35yVInc1L9PQyMpHM5FcdS5yqxSt1LY2YEuI/TIdt8+mJjp3a1XtznFJMqNzu5eM7BEk+MgOzAEYkYy1Bk7rYj8f3iL3MJRGu8haShOXiXR9/6zee9eKegbXj/AMwLpyhLcacfIL+2bUL8t6jEt6zVGI7u5cV085JJZDU1PIKoOH2wLFg1F84p11ziYw0iU9+5CxurM5xhImwra14o3+edI6W/dbQFHHWDHLdAjvjJuXO0D+c6BYTDl+MIMEfFKqspFIKy4sO67wshRfC+YlV74T6vjvVu/G8MYMEJWDW639z7Z0dzDh3Upu649HCJpyYSYoSnT2YY7tu6KBFb45LxR+r9OyUav7uF1Dc2Wtf4cP74Gaj+JublwK2/plSM/CLJl1KKfveWljyRK5sOTBKtGokNxLm15MLI6DLSdrQnq4fSnU5ly4oxIm6D5RwkjVhxKRT3WFSxHo9gLXLGEmLcg5HkxMosDydz0jnNksiM5XQ8rz/xgKWo6YpI8pO5iXXsZKlYy3Eke3o9OMUg3hNGJzydrhZG7fqlPXDVmGT2SYx4jL8qvI6TFCqTnjnMxtNrI7RvrNBnIjFUV/1V3ggz1l06kF9bapxyrVNsZBcS4vfGHU04QmEhSuZHf65QiRPpzjzdX2ffDTSiml+A82CJliSsiAQ/yF7wRjv1N0NSYVSHvjnKypWxrtwNES/pjs9DqsG2VECbd31eUJMFnu+C6xQu4xjMjuu75wP/2Q==
The problems may be due to the context that your onSelectFile is called from. Currently, your defining onSelectFile as an arrow function. This in turn means that this.setState will be undefined when your FileReader loads the image data (and then attempts to update the state of the component).
Consider the following code that outlines a possible solution for your problem:
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
src:''
}
}
// Define as class method rather than arrow function
onSelectFile(e) {
if (e.target.files && e.target.files.length > 0) {
const reader = new FileReader();
reader.addEventListener(
"load",
() =>
this.setState({
src: reader.result,
openCropper: true
}),
false
);
reader.readAsDataURL(e.target.files[0]);
}
}
render() {
return (
<div>
{/* invoke onSelectFile in this way to ensure calling context is
current component */}
<input type="file" onChange={(e) => this.onSelectFile(e)} />
<img src={this.state.src} />
</div>
)
}
}
ReactDOM.render(<App />, document.querySelector("#app"))
For a working demo, please see this jsFiddle - hope this helps!