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

amar4922
Shopify Partner
1 0 0

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"

Screenshot 2024-04-22 at 10.46.56 pm.png

 

 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.

Replies 0 (0)