Hello friends, in this article we will learn how to get the publishing image column from a SharePoint list using Rest Api in SharePoint Framework (SPFx).

Scenario

You are having a SharePoint list with a publishing column. You need to read an image from a publishing image column. Using this Rest API call, you can read the image URL from the publishing image column.

I am having a list named Webpart_Background_ImageURL. I want to get the Publishing Image column with an internal name (BackgroundImage_URL). I am passing a filter where Title = OfficeLocationBackground.

 I have written this code in webpart.tsx file.

Quick Answer

You can use the below code to get the image value:

private  GetBackgroundImage(web: Web,backGroundImageKey : string, listTitle: string, selects: string[]) {

    return new Promise((resolve, reject) => {
  
        // this array will be all the results once we are done
        const itemsCollector = [];
  
        // build some query pieces to use
        const items = web.lists.getByTitle(listTitle).items;
        //const query = items.select.apply(items, selects);
        const query = items.filter("Title eq '"+backGroundImageKey+"'").select.apply(items, selects);
  
        // get the initial list of items
        query.get().then((results) => {
  
            // we will use a batch to save as much as possible on traffic
            const batch = web.createBatch();
  
            // now we need to add all the requests to the batch
            // for each item we need to then make a seperate call to get the FieldValuesAsHtml
            for (let i = 0; i < results.length; i++) {
  
                // use the Item class to build our request for each item, appending FieldValuesAsHtml to url
                const htmlValues = new Item(items.getById(results[i].Id), "FieldValuesAsHtml");
  
                htmlValues.select("BackgroundImage_URL").inBatch(batch).get().then(htmlValue => {
  
                    // extend our item and push into the result set
                    itemsCollector.push(Util.extend(results[i], {
                        PublishingRollupImage: htmlValue.BackgroundImage_x005f_URL,
                    }));
                });
            }
  
            // execute the batch
            batch.execute().then(_ => {
  
                // use the behavior that all contained promises resolve first to ensure itemsCollector is populated
                resolve(itemsCollector);
            });
  
        }).catch(e => {
  
            reject(e);
        });
    });
  }
}

Usage

You can use the above function by calling it as shown below

import {
  Web,
  Item,
  Util,
} from "sp-pnp-js";

const web = new Web(this.props.siteUrl);

let backGroundImageList: string = "Webpart_Background_ImageURL";
let backGroundImageKey: string = "OfficeLocationBackground";

let items: any = [];
items = await this.GetBackgroundImage(web, backGroundImageKey, backGroundImageList, ["Id", "Title", "FileRef"]);