How to display image in web platform stored on server

Akash Gadhave

I'm using

/v2/content/{id}/download

I'm getting bytes data which is visible in network preview tab, but not able to convert it in some format so that it can be passed to src attribute of image to make it visible on my web application. I have tried many solutions but nothing working.

LazarescuA

Hello @Akash Gadhave ,

In Axios, you need to specify the responseType (otherwise it will default to JSON). You can use responseType arrayBuffer or blob.

For example, I used responseType: 'blob' in my code, and then with the response (res), I used a reader to set the base64 image like this:

if (res.data) {

	let reader = new FileReader();


	reader.readAsDataURL(res.data);

	reader.onload = function () {

	  const regex = /data:.*base64,/

	  imageData = reader.result.replace(regex,""));

	};

	reader.onerror = function (error) {

	  console.log(`File reading error: ${error.message}`);

	};

  }

Then, in the img block, used the imageData:

<img src={`data:image/png;base64, ${imageData}`} alt='Instance diagram' align="center"/>