SVGs missing from new install

AI-generated summary

In a new Docker-based Discourse dev install, ewd910 reports missing SVG icons and shares a network log showing a malformed request path: /svg-sprite/localhost:8087/svg-..., which includes the port in the hostname — likely causing 404s. Firepup650 suggests cache refresh and HTTPS, but ewd910 rules those out. JammyDodger references a port-related image issue, but ewd910 clarifies this is different. Arkshine suspects the port in DISCOURSE_HOSTNAME is the culprit, noting their working setup uses localhost without port in the hostname. ewd910 confirms the issue: SVG sprite JS tries to load a URL with localhost:8087 embedded twice, breaking the path. Setting DISCOURSE_HOSTNAME=localhost (without port) breaks the site entirely, suggesting inconsistent port handling in the dev environment. The core problem appears to be misconfigured hostname resolution in SVG sprite paths, possibly due to Docker or environment variable setup.

Hi, any idea what could have caused my site to lose all the svg icons, and is there any way to get them back? It’s a brand new docker installation

Try enabling force-https? Refresh using Ctrl + F5 to dump cache?

It’s definitely not a cache issue. Can’t force https either because I’m running it locally

What shows up in the network logs?

[08/Feb/2024:23:28:10 +0000] "localhost:8087" 192.168.65.1 "GET /svg-sprite/localhost:8087/svg-1-35f1b7e7d78d4b224c6ced63e8fc60a8ee1add9f.js HTTP/1.1" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36" "-" 404 2915 "http://localhost:8087/" 0.027 0.026 "-" "-" "-" "-" "-" "-" "-"

This might have something to do with it? Not sure what the base url is doing in the middle of that file path

Huh, that seems… Very wrong. I don’t think I can really help much here personally, I hope someone else can.

I think on a dev install you need to change the port to get images:

That’s a different issue entirely. You can see that the resource my install is requesting has the port number 8087 in the url already

Dev installs aren’t my forte. :slight_smile: Hopefully someone else has some insights. :crossed_fingers:

Can someone with a working installation tell me what their svgSpritePath is set to?
Mine is “/svg-sprite/localhost:8087/svg-1-35f1b7e7d78d4b224c6ced63e8fc60a8ee1add9f.js” which clearly isn’t right, not sure where that’s coming from though

That’s probably the issue. It likely expects the domain without the port. (mine doesn’t have the port)

I’m not using a docker dev install, so I really don’t know.

In my case (Windows WSL), the URL is http://localhost:4200, and to start Discourse I use this command: DISCOURSE_HOSTNAME=localhost UNICORN_LISTENER=localhost:3000 bin/ember-cli -u

So I’m thinking that maybe you need to define DISCOURSE_HOSTNAME or similar?

Yeah I was just about to post-- svgs aren’t loading because the js file they’re in has the url http://localhost:8087/svg-sprite/localhost/svg-…
and that script is trying to load
http://localhost:8087/svg-sprite/localhost:8087/svg-…
So the port in the hostname is the problem.
When I change DISCOURSE_HOSTNAME to simply localhost however the site doesn’t load at all. Seems like it needs the port some places but not others