I am using this API to retrieve an image from SF and show it in img tag

https://developer.salesforce.com/docs/atlas.en-us.api_rest.meta/api_rest/dome_sobject_rich_text_image_retrieve.htm

I am using axios to send a get request like this

const headers = {
  Authorization: `Bearer ${token}`,
  responseType: 'arraybuffer',
};

const url =
  'https://saas-force.salesforce.com/services/data/v50.0/sobjects/objectName__c/a0K1X000004Z8lI/richTextImageFields/Rich_Text_Field_Name__c/0EM1X000000MFDu';

const response = await axios.get(url, { headers });

img.setAttribute('src', `data:image/jpg;base64,${response.data}`);

The response looks like this once I log it in console

and from network

But the image is always showing as corrupted in html

it seems that there should be a different ways to deal with this type of response, I tried many approaches, but still didn't successed