Sometimes, we want to display binary data as image in React.
In this article, we’ll look at how to display binary data as image in React.
How to display binary data as image in React?
To display binary data as image in React, we can set the src prop of the img element to a base64 URL.
For instance, we write
const data =
"iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
const Example = ({ data }) => <img src={`data:image/jpeg;base64,${data}`} />;
to set the src prop of the img element in Example to a base64 URL with the binary image data.
Then the image will be displayed.
Conclusion
To display binary data as image in React, we can set the src prop of the img element to a base64 URL.
