Pnpjs: ClientSidePage.setBannerImage with Stock Images not working

[c-eiser13]

Category

• [ ] Enhancement
• [x] Bug
• [x] Question
• [ ] Documentation gap/issue

Version

Please specify what version of the library you are using: [ 2.0.8 ]

Please specify what version(s) of SharePoint you are targeting: [ SPO ]

If you are not using the latest release, please update and see if the issue is resolved before submitting an issue.

Expected / Desired Behavior / Question

Now that the @pnp/spfx-controls-react FilePicker control supports selecting stock images, I am trying to use this in conjunction with creating a page and setting the banner image URL of the page to the stock image URL.

Observed Behavior

It appears the code is removing the domain of the stock image, so "https://cdn.hubblecontent.osi.office.net/m365content/publish/010a25d2-f509-44fa-9229-8fb0768114eb/653039527.jpg" is converted to "/m365content/publish/010a25d2-f509-44fa-9229-8fb0768114eb/653039527.jpg" and an error is thrown that this URL does not exist.

I've been using this solution for a while without stock images and understand the need to use the relative URL, but in the browser, I can set the page thumbnail using the new stock images, so curious if this is an API limitation, or if it is related to the removal of the domain of the stock image? If further info or test results are needed, please let me know.

Steps to Reproduce

call setBannerImage on ClientSidePage instance using a stock image URL.
ClientSidePage.setBannerImage("https://cdn.hubblecontent.osi.office.net/m365content/publish/010a25d2-f509-44fa-9229-8fb0768114eb/653039527.jpg");

[patrick-rodgers]

Couple things are happening here. When you add a stock image it is added for you into the SiteAssets list. After exploring this they are using a method named "AddImageFromExternalUrl" to add that image into the site. We don't currently support that but can look at adding support - but the url given to setBannerImage must always be site relative. The images aren't actually referenced from outside the site.

Will think on how best to implement this and work towards support in the next release.

[c-eiser13]

Thanks @patrick-rodgers if there is anything I can do to help test along the way, I am willing to do so.

[patrick-rodgers]

Added a new method to clientside-page, "setBannerImageFromExternalUrl". You will be able to call that with the absolute url to the image file and it will be set as the banner image.

[c-eiser13]

Great news, if/when there is a beta available, I can test this out on my end.

[patrick-rodgers]

Appreciate your offer to test, unfortunately I can't publish a beta because we have a beta out from another code branch with the isolated runtime stuff in it and trying to merge all that together is just a mess ;).