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.
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-929D-70BA1AFBD3F7) - it seems to render with the image with similar code but when that is inspected the element on this page we get:
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.