I wrote this code to get items from a SharePoint list that contains an image field:
private _getApps(): Promise<void> {
if (this.properties.listId) {
return this.context.spHttpClient.get(
`${this.context.pageContext.web.absoluteUrl}` +
`/_api/web/lists/GetById(id='${this.properties.listId}')/items`,
SPHttpClient.configurations.v1
)
.then((response) => response.json())
.then((jsonResponse) => jsonResponse.value.map(
(item: any) => { return { title: item.Title, description: item.AppDescription, imageUrl: item.AppLogo? JSON.parse(item.AppLogo).serverRelativeUrl: "" }})
)
.then((items) => this.setState({ vivaApps: items }));
}
return Promise.resolve();
}
It used to work fine, but my images didn't look nice. I edited the items in the quick edit view, now the value of item.AppLogo doesn't get my the item url anymore, now it gets me this:
"{"fileName":"Reserved_ImageAttachment_[7]_[AppLogo][8]_[image1][1]_[7].png"}"
I haven't changed anything else. Before I modify the images in the quick view, I used to get the actual url as part of the AppLogo value, and I was parsing that value with JSON.parse to get the image url. Now it seems that it is broken.
If I try to run this query: https://mytenant.sharepoint.com/sites/mywebsite/_api/web/lists/GetById(id='3a1b02aa-5562-46a6-93e7-d4cca3c1a48b')/items?$select=Title,AppDescription,AppLogo/ServerRelativeUrl&$expand=AppLogo
I get back "The field or property 'AppLogo' does not exist." ... I know 100% that the internal name of my image field is AppLogo .. Not sure why after editing the field using quick view, everything got corrupted!
If I just run this query it would work: https://mytenant.sharepoint.com/sites/mywebsite/_api/web/lists/GetById(id='3a1b02aa-5562-46a6-93e7-d4cca3c1a48b')/items?$select=Title,AppDescription,AppLogo
But the AppLogo value would be this:
"{"fileName":"Reserved_ImageAttachment_[7]_[AppLogo][8]_[image1][1]_[7].png"}"
Any idea?