Background SVG asset not loading when deployed to subdirectories due to leading slash in URI

[ranolfi]

This one was actually brought up by @manassehkatz and we dismissed it at first, believing it to be due to GitHub Pages not rendering SVGs for security concerns, but that turned out to be incorrect.

Consider the staging deployment at https://codidact.github.io/landing-page/.

How it should look:

How it looks:

The background SVG asset https://codidact.github.io/assets/img/hero-bg.svg does not load. Notice anything?

The zen among us will notice the missing subdirectory string (landing-page/) in the resource path.

The culprit is

landing-page/src/styles/sections/hero.scss

Line 2 in 7c2670d

background-image: url("/assets/img/hero-bg.svg"), $color-gradient-alternate;

.

Since the code is "compiled" to url(/assets/img/hero-bg.svg)¹, one possible solution would be:

url("../../assets/img/hero-bg.svg")

...but I'm not sure how robust that is for every case.

-

_{1: shame how the style guidelines aren't kept after SCSS compilation (the double quotes) :|}

[ranolfi]

I wasn't aware that relative url() paths in CSS are relative to the CSS asset itself and not to the document in which it is included^[1]. As such, the straightforward solution - demonstrated in terms of processed ("compiled") CSS would actually be:

url("../img/hero-bg.svg")

However, it's been a little painful getting that to work on the SCSS / Webpack setup.

It seems this is not an uncommon difficulty. See also angular/angular-cli#12797.

Couldn't sort this out!

I mean, I got it working by changing line 2 from the hero.scss file linked above to

background-image: url("../../dist/assets/img/hero-bg.svg"), $color-gradient-alternate;

and installing/setting up svg-url-loader, but this is not a proper solution as it encodes the svg to data:image/svg+xml and that's not what we would expect.

(Update: Requested guidance from DevOps leader JustinM.)

[galegosimpatico]

[...], one possible solution would be:

url("../../assets/img/hero-bg.svg")

Works for me, I think. But I edited object CSS, not source scss doc.

Not so sure about "staging" in gh-pages....

[galegosimpatico]

However it looks like solved in production. Can close now?

I think "staging" in gh-pages isn't somehow completed about this?

[Daksh14]

The design is old and this is fixed, the added slash no more affects any assets