Shopify App Development with Remix and Polaris - Empty State Image not Rendering

[amar4922]

Hi,

I have been trying to learn Shopify App development and have had issues getting the image in the Empty State item to show. I have been using the default one under the url: "https://cdn.shopify.com/s/files/1/0262/4071/2726/files/emptystate-files.png". What i have noticed is that when rendered by the browser there is no image shown, just a blank grey circle. This is with the tutorial downloaded from GitHub and run following the directions from "https://shopify.dev/docs/apps/getting-started/build-qr-code-app?framework=remix": 

 Despite this the path to the image is correct as when the element is inspected there exists a tag which has the correct link.

<img alt="" src="https://cdn.shopify.com/s/files/1/0262/4071/2726/files/emptystate-files.png" class="Polaris-EmptyState__Image" role="presentation">

Note what the value class is equal to.

Now looking at the documentation example (https://polaris.shopify.com/components/layout-and-structure/empty-state?shpxid=05a7bbe0-DA1B-47F1-92...) - it seems to render with the image with similar code but when that is inspected the element on this page we get: 

<img alt="" src="https://cdn.shopify.com/s/files/1/0262/4071/2726/files/emptystate-files.png" class="Polaris-EmptyState__Image Polaris-EmptyState--loaded" role="presentation">

The difference here is the class = "Polaris-EmptyState__Image Polaris-EmptyState--loaded" instead of just Polaris-EmptyState__Image" which is in the code I have used.

When the Polaris-EmptyState--loaded  is added to my code on the browser side the image is suddenly displayed but I cant change this in my source code given the boundaries of Polaris.

What I want to know is - how can i get the image to render with the correct class (like when inspecting the element in the documentation) so it actually displays? Is there something fundamental I can't seem to get my head around.