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

Shopify Partner
1 0 0



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: "". 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 ""

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="" class="Polaris-EmptyState__Image" role="presentation">



Note what the value class is equal to.


Now looking at the documentation example ( - 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="" 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)