Deploying Angular App to Github Page - Images missing

#1

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

#2

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")

#3

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.

#4

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

#5

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.

#6

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

#7

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.

#8

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")
1 Like
#9

YES! It worked. You are a genius!

Thanks a bunch for the help!

Have a great day ahead!

1 Like