title: How to render an Image in react which is coming from Nodejs backend as res.json()?
body: <p>So I'm getting the image data from NodeJs backend whose response from axios in the React frontend is as follows ::: </p>
  
  <pre><code>data: [239, 191, 189, 239, 191, 189, 239, 191, 189, 239, 191, 189, 0, 16, 74, 70, 73, 70, 0, 1, 1, 0, 0, 1,…]
  type: "Buffer"
  </code></pre>
  
  <p>Now I'm setting the state in react component as</p>
  
  <pre><code>const buffered = fileResponse.data;
  const based64 = new Buffer.from(buffered).toString('base64');
  this.setState({ fileData : based64 })
  </code></pre>
  
  <p>After setting the state I'm rendering the image as follows ::: </p>
  
  <pre><code>&lt;img src={`data:image/jpeg;base64,${this.state.fileData}`} 
       alt=" Not loaded" 
       onLoad = {this.loading}
       onError = {(error) =&gt; this.ImgError(error)}
  /&gt;
  </code></pre>
  
  <p>While rendering an icon this procedure works fine. The icon gets rendered on the screen and the onLoad event is fired.<br>
  But when rendering a jpeg image, the <strong>onError</strong> method always gets fired and the image from the backend never gets rendered on the application just the alt tags get loaded.<br>
  Am I doing something wrong in the code above?<br>
  I've tried to just use new Buffer() method instead of new Buffer.from(), which gives the same error. I've also tried to lazy load the image using react-lazyload and react-lazy-load-image-component library which produces the same error.Thank you for the help in advance.</p>
  
  <p><strong>Updated :</strong> This is the function which gets the error :</p>
  
  <pre><code>ImgError = (error) =&gt; {
          console.log("on Error in image \n\n",error);
          console.log("1.",error.bubbles)
          console.log("2.",error.cancelable)
          console.log("3.",error.currentTarget)
          console.log("4.",error.defaultPrevented)
          console.log("5.",error.dispatchConfig)
          console.log("6.",error.eventPhase)
          console.log("7.",error.isDefaultPrevented)
          console.log("8.",error.isPropogationStopped)
          console.log("9.",error.isTrusted)
          console.log("10.",error.nativeEvent)
          console.log("11.",error.target)
          console.log("12.",error.timeStamp)
          console.log("13.",error.type)
  
      }
  </code></pre>
  
  <p>and the result to this is </p>
  
  <p><a href="https://i.stack.imgur.com/idQfQ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/idQfQ.jpg" alt="enter image description here"></a></p>