SharePoint online list image column is not returning the data properly

Question

Hello, I trust you are doing well!

I have a matter to address regarding a project developed using the SPFX React framework. Lately, there have been issues with the SharePoint image column. When attempting to retrieve data from the image column using the PnP JS library, the response is not accurate.

I have included two samples for your reference: one from the affected list and another from the functional list.

The affected list response sample:

The functional list response sample:

The distinction is evident. From the functional response, I can easily obtain the server-relative URL and utilize it as needed.

However, observe the response from the affected list; it is decidedly peculiar.

Another peculiar behavior is that regardless of the file I attach in the image column, it is automatically renamed. It does not retain the same name within the image column.

When attempting to open the images directly in SharePoint, I've noticed that the URLs of the files exhibit a completely different syntax.

Affected list image URL sample:

Functional list image URL sample:

What could be the underlying cause of this problem? Please assist me by offering valuable suggestions to address this production issue.

Thank you in advance!

Happy coding...

Answer 1

This happens when you create a New List and by default "Attachment" is turned on for the list.
Resolution: Turn off "Attachement" for list items in Advanced Settings under list settings.

Answer 2

is there any solution we found for this? We are also facing similar kind of issue in our projects and multiple SPFx webparts are stucked because of this issue.

Answer 3

if (RawImageTxt != "") {
          var ImgObj = JSON.parse(RawImageTxt);
          if(ImgObj.serverRelativeUrl==undefined){
            var URLimg="siteurl/Lists/Quick%20Links/Attachments/"+item.ID+"/"+ImgObj.fileName
          }else{
            URLimg=ImgObj.serverRelativeUrl
          }

I've resolved the issue by doing this workaround.