Fix missing images from the Sitecore Demo Edge NextJS Site

As continuation of my earlier blog, in this article, I cover another issue I faced as part of setting up the Sitecore Edge Demo site aka PLAY! Summit Demo

So, once I dockered-up, I found that many images were missing in the home page and all these images were from the Sitecore media library. 

On inspect, I realised that the browser was trying to fetch the image from the rendered site instead of the cm instance:

While I was perusing the showconfig.aspx page, I realised if I could patch mediaprefixes, then I would be in the correct direction:

After some more investigation, I bumped on the Sitecore.media.config and the below setting is  responsible to pass the cm url, this is the end-result after switching on the flag:

<layoutService>

      <configurations>

        <config name="default">

          <rendering>

            <renderingContentsResolver>

              <IncludeServerUrlInMediaUrls>true</IncludeServerUrlInMediaUrls>

            </renderingContentsResolver>

          </rendering>

        </config>      

      </configurations>

    </layoutService>

Note that the changes in this blog article must be done along with the site patch done as per my earlier blog article:

Finally, all Sitecore media library images  appear fine:

Quite a positive end-result but, if I could do something in the client side, it would be a good second solution:  for instance, here is some proof of the possibility in next.config.js redirects section:

Although I tinkered the redirects section in the next.config.js file, there wasn't much success, some plumbing missing somewhere:

Another investigation for another day's blog article!