I'm having an issue that's probably not easy to diagnose so I'm going to describe the general issue I'm having.
I'm using a front-end router (page.js) to route around my app. Basically, whenever I route somewhere, I show components that should be shown for that route. The issue I'm having is that when I route to a specific route and then route back to where I was before (e.g. by clicking the "home" button and routing back to the homepage), my images are no longer displaying in their respective components. Here is an example:
Before I route away from my homepage, I have this image (svg) showing:
Then I route away to another view/component, and route back. Now my image is missing:
Upon inspecting dev tools:
Clearly the resource is present, but not showing.
This same thing happens to other images that should be showing in the component(s) that show with that route.
To test things out, I kept one component showing rather than hiding it on routing away from the current view, and sure enough the image was still showing when routing back to the original view that contained it and other components. The images in the other components were still missing.
Again I don't know what this problem would fall under so I hope to elicit some general advice as to what the problem could be.
Update. This issue also happens when using the back button. Perhaps it's related to the history state?
Without knowing exactly why this problem occurred, I have been able to fix the issue by using page.js in hashbang mode. I.e., I turned off the hashbang in the routing and it caused issues with finding public resources on popstate.