How to display binary data as image in React?

Displaying binary data as images in React can be achieved through several common approaches. I will detail two prevalent methods, providing code examples for each.

Method 1: Using Blob and URL.createObjectURL

This method converts binary data into a Blob object and then utilizes the URL.createObjectURL method to generate a URL that serves as the src attribute for an image.

Example Code

jsx
import React from 'react';

class BinaryImage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      imageUrl: '',
    };
  }

  componentDidMount() {
    const { binaryData } = this.props;

    // Assuming binaryData represents the received binary image data
    const blob = new Blob([binaryData], { type: 'image/jpeg' });
    const imageUrl = URL.createObjectURL(blob);

    this.setState({ imageUrl });
  }

  componentWillUnmount() {
    // Revoke the created URL to prevent memory leaks
    URL.revokeObjectURL(this.state.imageUrl);
  }

  render() {
    const { imageUrl } = this.state;
    return <img src={imageUrl} alt="Binary Image" />;
  }
}

export default BinaryImage;

Method 2: Using Base64 Encoding

An alternative approach involves converting binary data into a Base64-encoded string and directly using this string as the src attribute for an image.

Example Code

jsx
import React from 'react';

class BinaryImage extends React.Component {
  convertToBase64(binaryData) {
    const base64String = btoa(
      new Uint8Array(binaryData).reduce(
        (data, byte) => data + String.fromCharCode(byte),
        ''
      )
    );
    return `data:image/jpeg;base64,${base64String}`;
  }

  render() {
    const { binaryData } = this.props;
    const imageUrl = this.convertToBase64(binaryData);

    return <img src={imageUrl} alt="Binary Image" />;
  }
}

export default BinaryImage;

Summary

Both methods present distinct advantages and trade-offs:

• Using Blob and URL is optimal for large files as it avoids converting file content to a Base64 string, thereby conserving CPU resources and memory usage.
• Base64 may offer greater convenience when storing image data in a database or transmitting it via an API.

The selection of a method should be based on specific requirements and performance considerations.