get publishing image url from SharePoint list using PnP Core js with SPFx

[HelloPnP]

I've a custom SharePoint list with the following fields
ID, Title, TypeOfSports(LookupFromSportsList), PublishingRollupImage
I had tried the following two blogs post but that didn't helped me
Blog Post 1
Blog Post 2

here is my code

pnp.sp.web.lists.getByTitle("SportsDetail").items
    .select("Title","FileRef","FieldValuesAsText/MetaInfo","TypeOfSport/Title")
    .expand('FieldValuesAsText,TypeOfSport').get().then(function (result) {
      for (var i = 0; i < result.length; i++) {           
        var pubImage = (result[i].FieldValuesAsText.MetaInfo || "")
        .split('\r\n')
        .filter(function(e){return e.match(/^PublishingRollupImage:SW/gi);})
        .map(function(e) {return e.split ('|')[1];});					
        console.log(result[i].Title);
        console.log(pubImage); //returns null
}

I'm able to get the Publishing image URL with the following code but its not a good way in case we have lots of records.

var regex = /<img.*?src=['"](.*?)['"]/;
pnp.sp.web.lists.getByTitle('SportsDetail').items.getById(1)
.select("ID", "PublishingRollupImage").fieldValuesAsHTML.get().then(function(pubField){     
      console.log(regex.exec(pubField.PublishingRollupImage)[1]);
});

[jsaxinger]

I have got the same problem. I am not getting any MetaInfo back from the api (SharePoint 2013).

[patrick-rodgers]

The PublishingRollupImage isn't really designed to be used outside the Pages library - so it gets even hackier to use it in the way you are trying. You can however get the value - just with two calls. I have updated the article to include the example I am pasting below.

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

async function Example() {

    const web = new Web("https://{tenant}.sharepoint.com/sites/dev");

    try {

        const items = await GetItemsWithPublishingRollupImage(web, "Issue694", ["Id", "Title", "FileRef"]);

        console.log(`here are the items: ${JSON.stringify(items, null, 4)}`);

    } catch (e) {

        console.error(e);
    }
}

function GetItemsWithPublishingRollupImage(web: Web, 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);

        // 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("PublishingRollupImage").inBatch(batch).get().then(htmlValue => {

                    // extend our item and push into the result set
                    itemsCollector.push(Util.extend(results[i], {
                        PublishingRollupImage: htmlValue.PublishingRollupImage,
                    }));
                });
            }

            // 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);
        });
    });
}

[HelloPnP]

Hi @patrick-rodgers
it is working for me, thank you very much.
God bless you ;)

[phillipharding]

The PublishingRollupImage isn't really designed to be used outside the Pages library

@patrick-rodgers I don't understand what you mean by this statement, that we shouldn't use the PublishingImage column type outside of a Pages library, or that we shouldn't attempt to use a PublishingImage column outside of the publlishing infrastructure (Pages etc) but not for front-end customisations involving REST?

The Publishing HTML column seems to work just fine in this scenario.

[patrick-rodgers]

Thanks @NasirSP - glad you are unblocked.

@phillipharding - you can use whatever you want anywhere you want, but the publishing stuff is special. For example PublishingRollupImage isn't a field, it gets stored hidden away and is very difficult to work with in queries. Just something to plan for based on how you need to use things. If you need to only store a url to reference a picture the url field may be a better choice.

Going to close this as answered, please reopen should we need to continue the conversation. Thanks!