SharePoint Image column behaves differently

We all are aware of the Image/Thumbnail column present in the SharePoint list. Whenever we want to store the image, we use this column, but recently I found that SharePoint image/thumbnail columns are behaving differently.
What's happening :

Previously, when we were saving the items in the list and when we fetched items using the code, it was giving a response like this:

'{"type":"thumbnail","fileName":"MyPhoto.jpg","nativeFile":{},"fieldName":"ProfilePicture","serverUrl":"https://techrobbers.sharepoint.com","fieldId":"id","serverRelativeUrl":"/sites/SIteName/SiteAssets/Lists/ListID/MyPhoto.jpg","id":"ID"}'

But now it is returning data in the below format:

"{"fileName":"Reserved_ImageAttachment_[14][Photo][7][content][2]_[10].jpg"}"

Also one catch here is that it's working fine for all the existing items but behaving differently on adding new items.

Due to this the code is breaking.

I have checked and found that response format is changed and serverRelativeUrl is coming as null and the location of the new items is also changed.

This is happening because updates made by SharePoint, In SharePoint Online Lists, if the Attachments option is Enabled, images will be stored in same SharePoint list (attachments section) instead of storing those in Site Assets library, that's why location is now changed for new items. 

Note: Some people suggest that we can disable the attachments in the SharePoint lists, but that is not the correct solution because attachments are a very important feature, and we might need both the image and attachment columns in the list. A better solution is that we should make some amendments in the code. 

To fixed these issue I have made some changes into the code and added a check for the serverRelativeUrl and if it comes as a blank, I am creating a new location by using the list name, item id and file name.

Here is the code.

let imagePath = "";
let ImageInfo = JSON.parse(data["Image"]);
if (ImageInfo && ImageInfo ["serverRelativeUrl"])
{
imagePath = ImageInfo ["serverRelativeUrl"];
}
else
{
imagePath = `${this.props.context.pageContext.site.absoluteUrl}/Lists/${this.props.listName}/Attachments/${ImageInfo .ID}/${ImageInfo .fileName}`;
}

Thanks.
Sharing is caring.