Hello,
So, I feel like I’ve had this problem before but I don’t recall how I solved it. Or if I did. Or maybe none of that even happened.
This is on live site only. The app is being served with Fastboot and Prember.
When a User goes to http://designmonster.com/ everything is great. However, upon refresh/reload, the requestURL for the images gets appended with the full URL instead of the rootURL.
Example requestURL for asset on initial page load: DesignMonster
Works as it should
User presses refresh/reload - requestURL becomes: DesignMonster(or whatever)/assets/images/IMAGE.webp
Does not work, because file path is now appended with the whole URL instead of the root.
User navigates using the site’s nav menu, image path corrects to root url and works again. User refreshes/reloads page. Broken again. Etc.
I can confirm that it does not happen in production environment on localhost. Only once it has been pushed to Netlify. So something breaks between development and serving.
I had image post-processing on in the settings. Thought maybe that was it but turned off and have had a few deploys since then and no change.
is it possible that something is affecting just your browser? have you tried on a different browser, and in an incognito window? extensions can create some very strange problems, we see it all the time, even widely used ones.
Is that on the index page? Since the requestURL appends the actual URL in the browser at the time, and the URL on the index page is the root URL, the bug has no effect - It changes from www.designmonster.com/assets/images/IMAGE.webp to www.designmonster.com/assets/images/IMAGE.webp, which is correct. But from the who-we-are page, on refresh, images fail, because it is starting at www.designmonster.com/who-we-are/assets/images/IMAGE.webp
And yes, sorry, should have mentioned - it happens to me across all browsers and in incognito mode.
It’s live now with a jpg for aminaheadshotwide on the who-we-are page at any screen size above 1168px. You can watch it append the URL segment /who-we-are/ on refresh in the network tab in the header requestURL. Still the same thing.
The issue here is the src path for images. When visiting “Who we are” the URL is https://www.designmonster.com/who-we-are. After refreshing the URL is https://www.designmonster.com/who-we-are/.
In the first instance, the image src assets/images/aminaheadshotwide-b2b34f2ee7feb44825216e06e78ec729.jpg works because it is relative to the site root. In the second instance the image src is relative to /who-we-are/ because of the trailing slash.
The easiest way to resolve this is to prepend a slash to the src values e.g. /assets/images/aminaheadshotwide-b2b34f2ee7feb44825216e06e78ec729.jpg so they are always relative to the site root.
