Deploying Angular App to Github Page - Images missing

[Andreea2]

Hi guys,

GitHub rep: GitHub - ezra0619/FM-intermediate-url-shortening-api-landing-page: Frontend Mentor Challenge - Difficulty: Intermediate

Github page: UrlShorteningApiLandingPage

Docs folder is built using : ng build --output-path docs --base-href /FM-intermediate-url-shortening-api-landing-page/

When setting up GitHub page for this project, 2 background images are not loaded because of their path. They are in the scss file.

      background: url(/assets/bg-shorten-desktop.svg) $thirdPageColor;
      background: url(/assets/bg-boost-desktop.svg) $thirdPageColor;

The pathing in the templates are recognized and are written such as:

    <img src="./assets/illustration-working.svg" alt="person at computer image" />

I cannot write use the “./” in the scss file as it breaks the code. What do I do in this case for all the paths to be recognized?

Thank you!
Andreea

[biscuitmanz]

hey @Andreea2 ,
your scss file is in the app folder so you might have to back out before you can reach the assets folder with a ../ like this…
background: url("../assets/bg-shorten-desktop.svg")

[Andreea2]

Hi there,

Forgot to mention that on my testing server, everything builds perfectly. The only problem I have is with after I deploy it to Github pages.

I also tried creating a production copy with “url(”…/assets/bg-shorten-desktop.svg") but had the same problem.

[biscuitmanz]

Could you try it without the dash or dots? So it’s just url(assets/bg-shorten-desktop.svg)

[Andreea2]

Tried everything that didn’t break the testing server.

What actually fixes the issue on GitHub pages is if I write it like this:

assets/bg-boost-desktop.svg

However, the above breaks on my testing server.

[biscuitmanz]

Yeah this is a wierd one lol does it break on testing if you out it inside quotes too?

[Andreea2]

Sadly, yes. It breaks on testing.

What github pages actually wants from me is “./assets/bla-bla” or “assets/bla-bla”. But while this “./assets/bla-bla” works in the template, it does not work on the .scss file.

[biscuitmanz]

hi sorry for late reply,

one more try to see if it works on dev & live server

background: url("~src/assets/bg-shorten-desktop.svg")

[Andreea2]

YES! It worked. You are a genius!

Thanks a bunch for the help!

Have a great day ahead!