PnPJs "setBannerImage" is not updating the bannerImageUrl for the sitepages

[kameshm05]

What version of PnPjs library you are using

2.x (No longer supported)

Minor Version Number

2.11.0

Target environment

SharePoint Framework

Additional environment details

I'm using nodejs (14.21.3) and PnPjs(2.11.0)

Question/Request

Hi,

I've been trying to update the bannerImageUrl for a site page using PnPJs, but the bannerImage is not updating.

We need to copy an existing page on the site. While the copying process works, the banner image is missing on the copied page. To fix this, I attempted to update the banner image using the following code:

sp.web
      .loadClientsidePage("<url of the page>")
      .then((page) => {
page
          .copy(sp.web, _title, _title, false)
          .then((res: any) => {
 res.setBannerImage(
              "/sites/siteName/SiteAssets/sitepages/Afternoon-News/image.jpg",
              {
                altText: "Image description",
                imageSourceType: 2,
                translateX: 30,
                translateY: 1234,
              }
            );
res.save();
window.open(`${res.json.AbsoluteUrl}?Mode=Edit`, "_blank");
})
})

However, it's not working as expected. Could you help me resolve this issue?
I am using PnPJs version 2.11.0. I've encountered the same issue reported here: the bannerImageUrl for a site page is not updating.

[bcameron1231]

Hi, unfortunately, I can't reproduce. I am able to update the Banner image using v2 of the library.

  var page = await sp.web.loadClientsidePage("/SitePages/Test.aspx");
  page.setBannerImage("/siteassets/cat.png");
  await page.save();

Double check the URL to your image. If the library can't find the image, it internally swallows a 404 error so you may not be seeing the error.

I did notice it creates a new image and doesn't replace the existing.

[kameshm05]

Hi, I have also fixed the issue but the banner area is not replacing the existing one instead it is creating another one extra banner area.

Can anybody tell it is because of the version issue or bug in the PnPjs Library?

[bcameron1231]

Hi, not sure. We'd have to explore it and see if it's happening in V4 (I suspect it is, the code here is largely the same)

However, please see this comment #3096 (comment)

We've basically reversed engineered the page structure to build out the pages module (since APIs were lacking). So these pages methods certainly are more susceptible to issues as Microsoft continues to update pages. Until a pages API exists, this is a revolving door of fixes for this module.