title: How to display an image saved as blob in React
body: <p>I wrote a function that saves an image as blob:</p>
  
  <pre><code>render() {
    ...
    return (
      ...
        &lt;input
          accept="image/*"
          onChange={this.handleUploadImage.bind(this)}
          id="contained-button-file"
          multiple
          type="file"
        /&gt;
  )}
  </code></pre>
  
  <p>and this is the function called in onChange:</p>
  
  <pre><code>  handleUploadImage(event) {
      const that = this;
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onloadend = () =&gt; {
        that.setState({
          image: URL.createObjectURL(file),
          userImage: reader.result,
        });
      };
    }
  </code></pre>
  
  <p>I think this works fine because it saves in DB because the document has a field called image which looks like this: <code>blob:http://localhost:3000/80953c91-68fe-4d2a-8f5e-d9dd437c1f94</code></p>
  
  <p>this object can be accessed like <code>this.props.product</code>, to access the image it is <code>this.props.product.image</code></p>
  
  <p>The problem is when I want to show the image, I don't know how to do this.</p>
  
  <p>I tried to put it in render like:</p>
  
  <pre><code>  {
      this.props.product.image ? (
        &lt;img alt="" src={this.props.product.image} /&gt;
      ) : (
        null
      );
    }
  </code></pre>
  
  <p>it throws this error:</p>
  
  <p><a href="https://i.stack.imgur.com/cuDgc.png" rel="noreferrer"><img src="https://i.stack.imgur.com/cuDgc.png" alt="enter image description here"></a></p>
  
  <p>and the header:
  <a href="https://i.stack.imgur.com/r3c0X.png" rel="noreferrer"><img src="https://i.stack.imgur.com/r3c0X.png" alt="enter image description here"></a></p>
  
  <p>any suggestions?</p>