Images disappearing in Sitecore XMC Pages Builder

Disclaimer: Note that this is a project issue I faced and explains the process of how I solved the issue and isn't an issue with the XMC platform as such.

Sometimes finding the cause of an issue in Sitecore is like finding a needle in a haystack. Since this blog content befits such a scenario, hence this blog post!

I started writing this note last year but got a breakthrough only on 1st Jan 2025. What a way to start the year by finding a solve for a long-standing project issue faced for last couple of months - seemed like a blessing in disguise. So, for context, while deploying to higher xmc environments, images were missing in a ghostly manner in my XMC environments' pages builder. On using the preview icon in the pages builder, the images would appear fine but the issue was we couldn't afford the content authors to miss the wsiwyg feature of the pages builder. Since there wasn't anything wrong with my XMC environment settings (in my dubious opinion!) I felt that the images were acting flaky. It gave me a lot of sleepless nights since the behaviour was not comprehend-able to say the least.  While the initial suspect was the component as such, I then negated the component code because the same image component worked fine in a vanilla XMC instance. To explain the behaviour in words to anyone by itself was tough, let me try that again here in words - "Once the images are added to the concerned image component, they appear fine first time, then I toggle to another page or browser window and come back to the original page, the images would disappear along with other images in all the pages in the site". Easier to understand through this video rather:

So, raised a Sitecore Support ticket CS0522896 with the following details from a long conversation wherein i meandered into lot of aspects without much clues: 

********

Unsure if this would help but in XMC dev env, when i logout completely from the portal and get into the environment, the images work fine... while, if i move to another random browser session, come back to the open xmc dev url window and access another page in the XMC environment, the images aren't found... i have got here below two different image urls - one works while another doesn't since the tt and ttc values have changed but in case of other environments, even if the tt and ttc values change, the images do work unless you have dev env running in one of the browser sessions:

Working:
https://xmc-eh-xxxxxxxxxxxxx.sitecorecloud.io/-/media/system/simulator-backgrounds/hd-tv.png?h=1556&iar=0&w=2276&rev=2f55521f98a74ed4ab3d462ee6896432&ttc=63870001181&tt=CDB25C8411A9643EB9CB66436D391792

Not working:
https://xmc-eh-xxxxxxxxxxxxx.sitecorecloud.io/-/media/system/simulator-backgrounds/hd-tv.png?h=1556&iar=0&w=2276&rev=2f55521f98a74ed4ab3d462ee6896432&ttc=63870001214&tt=CCB497BBFFB873706B6ECF16F02F49AD

****************************

The pages builder doesn't display the image once the page is saved or refreshed. On inspecting, the domain name seems invalid or irrelevant. For instance, in case of dev environment and the attached scr shot, the valid url for the image that is displayed is fine is - https://xmc-yyyyyyyyyyyyyyy.io/-/media/239875655fb044e88bd0695c5cbd5550.ashx?vs=1&ts=44ebac25-cdc6-4590-8c65-919cfe541569

For the one that is not displayed, the url looks like follows:
https://xmc-eh-xxxxxxxxxxxxx.sitecorecloud.io/-/jssmedia/project/unisuper/employeronline/contacts/photo-test-1.jpg?h=165&iar=0&w=151&rev=44ebac25cdc645908c65919cfe541569&ttc=63867511051&tt=0ECB595E74C3109015E7D15C447E63F1

This behaviour happens both in dev and SIT01. How can this be fixed?

***********

After some discussions with the ever-patient Sitecore support team, the tip was to disable authentication for media library items since that is one of the recent fixes in the XMC platform or check any redundant configurations. The XMC fix wasn't a culprit since the pages builder as such worked fine in other client instances except the one client instance that had the issue with a particular repo code deployment. I then decided to isolate the issue and deployed just the component to a vanilla Sitecore XMC instance, all from scratch, but this time it was tough for me to replicate the issue, i wanted to solve, in the new instance - As the famous developer quote by navan, "Easier to solve than replicate". In the process of replicating, I did a lot of e2e activities. For instance, thanks to the option of deploying a branch to a Sitecore XMC environment. I love this feature and used this option extensively during this analysis. You can access this from deploy app using Options -> Edit environment details:

Using this option, you can link any github branch to the concerned environment, fire an one-off build and deploy for testing your deployed code changes. Then, put back the original branch, in case if you are process-oriented about something like development environment should fire auto-deploy for only develop branch. Then, set it back to develop branch after the feature test.

Back to the issue on hand, by this point, I had negated the following items and what i was left was to look at any issues with Sitecore configuration as such:

That is when I started looking at some of the patches applied to my problematic XMC environment setup. I then noticed a patch that was inherited from a previous headless setup and had set the IncludeServerUrlInMediaUrls to false:

On the contrary, in the vanilla XMC instance, without the applied patch config, there were about 8 occurrences of IncludeServerUrlInMediaUrls and the "sxa-jss" IncludeServerUrlInMediaUrls  was set to true:

------------------------------------------------------------------------------------------------------------------------

XMC Titbit: Patch config files added directly under App_Config folder isn't picked by XMC runtime (even if part of the platform project). So, ensure to create a sub-folder like Include or Environment and add the config file(s) to the sub-folder, then add it to the platform project and deploy.

------------------------------------------------------------------------------------------------------------------------

The ghost warded-off with the above flag patched as true instead:

Patch with false value:

Patch with true value:

Note: ootb value is true in this instance. So, even if this value isn't patched, true will be applied automatically

Based on my inference and also a note as part of the support ticket alludes to the fact that the issue is because the unprefixed media url looks for the image in the editing host domain while the image is accessible only from the CM host domain. So, just in case if you have issues with images, this blog note could be helpful in looking at if url prefixing is correct. Also, in the former case, opening the image in a new tab used to throw page/resource not found error while in case of adding a prefix url, the image opens fine in a new tab too.

Before prefixing, Sitecore XMC trying to access the image from the editing host so, page not found error:

In retrospect, all was probably fine in the local environment since both the (editing/CM) host domains refer to the same instance.

Summary:

Although there "could" be other variations for the relevance of the IncludeServerUrlInMediaUrls flag, with regard to context of this post, here is the pictorial representation:

Finally, here is the closing note from the Sitecore support team:

============================

As I mentioned in my previous reply, I tried to reproduce the issue in my XMC environment by patching “IncludeServerUrlInMediaUrls” in the same way as it was done by your “Platform.HeadlessLayoutService.config” config file.

However, in my case, no matter if it is absolute or relative media URL, it points to the CM domain, but not rendering (editing) host in XMC Pages.

In your “xyz22-usmdevfda4-dev19302” XMC environment, if I understood correctly, relative media URLs start to point to the “xyzrefqz.sitecorecloud.io” rendering host domain (defined in the “/sitecore/system/Settings/Services/Rendering Hosts/employeronline” item) when “IncludeServerUrlInMediaUrls” is set to “false”, but when they become absolute (after setting “IncludeServerUrlInMediaUrls” to “true”) then the “xyz22-usmdevfda4-dev19302.sitecorecloud.io” CM domain is used and the issue stops to reproduce.

This behavior can be also observed when accessing any page that contains media URLs using your rendering host directly in a browser, for example:

https://xyzrefqz.sitecorecloud.io/mytest

As you can see, the following media URL is always accessible:

https://xyz22-usmdevfda4-dev19302.sitecorecloud.io/-/media/project/xxx/employeronline/icons/contact-us.jpg?h=481&iar=0&w=612

However, the following media URL where the domain is changed from CM to rendering host becomes inaccessible after some period (the redirection to the “/identity/login/shell/Auth0” page occurs):

https://xyzrefqz.sitecorecloud.io/-/media/project/xxx/employeronline/icons/contact-us.jpg?h=481&iar=0&w=612

Anyway, we suggest keeping “IncludeServerUrlInMediaUrls” set to “true” to prevent the issue.

If this does not work for you, please let us know and we will try to investigate further why images become inaccessible when a rendering host is used instead of a CM domain for their URLs.

============================