Image CDN URLs returned from Section Rendering API differ from initial page render

[leeuwis]

Context

We are using the Section Rendering API to dynamically update images when a variant is selected. However, we’ve noticed that the image URLs returned by the Section Rendering API differ from those generated during the initial page load. This inconsistency causes the images to briefly flash and reload, even when the image itself remains unchanged.

Expected Behavior

The image URLs returned by the Section Rendering API should be identical to those generated during the initial page load, especially when the same Liquid code is used. This would prevent unnecessary image reloads.

Example

The following Liquid code in a section file:

{{ product.selected_or_first_available_variant.featured_image | image_url: width: 1280 }}

Results in the following URL on initial page render:

//instant-dev-store.myshopify.com/cdn/shop/products/teal-t-shirt.jpg?v=1707818104&width=1280

But the Section Rendering API returns the following URL:

https://cdn.shopify.com/s/files/1/0817/1234/9487/products/teal-t-shirt.jpg?v=1707818104&width=1280

Impact

This discrepancy causes unnecessary image reloads, leading to a flickering effect that negatively impacts performance and user experience. For consistency and better user experience, the URLs returned by the Section Rendering API should match those generated during the initial render.

[aswamy]

Hey @leeuwis, the Section Rendering API should return the shop domain URL instead of CDN one now. Cheers.