How can I render an ArrayBuffer (PNG image) directly as an image in React?

Question

I'm getting a ArrayBuffer representing a PNG image file sent over a socket. Is there a way to render this directly to an image tab without needing to convert it to base64 first? It seems unnecessary to add the extra conversion step just for rendering.

Answer 1

You can convert array buffer to blob and then use URL.createObjectURL(blob) to create a source to the image.

Example

 const { useState, useEffect } = React; const url = "https://cors-anywhere.herokuapp.com/https://www.w3schools.com/howto/img_avatar2.png" const App = () => { const [{ srcBlob, srcDataUri }, setSrc] = useState({ srcBlob: null, srcDataUri: null }); useEffect(() => { let isUnmounted = false; fetch(url, { }).then(response => response.blob()).then(blob => blob.arrayBuffer()).then(arrayBuffer => { if(isUnmounted) { return; } const blob = new Blob([arrayBuffer]) const srcBlob = URL.createObjectURL(blob); setSrc(state => ({...state, srcBlob })); }) return () => { isUnmounted = true; } }, []) return <div> {srcBlob && <div> <img width="100" height="100" src={srcBlob} alt="image blob"/> <div>Blob: {srcBlob}</div> </div>} </div> } ReactDOM.render( <App />, document.getElementById('root') );

 <script src="https://unpkg.com/react/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <div id="root"></div>