font, background image url path not working from the app.css

[biks152207]

I have app.css generated by yo angular-fullstack with .css stylesheet.I am trying add background image from app.css "background: url("/assets/images/top-background.jpg") no-repeat;" however it doesn't show up in the frontend.This is even not working for fonts.The path doesn't seem to work.Any images or fonts loading from app.css are not working at all.Guys please help me

[chandruk4321]

I have the same issue. However, when i serve using gulp seve:dist, all fonts adn images are working

-create a fresh project with latest generator

• add a font awesome element in main.html
  
• run glup serve (the font awesome image not shown.. shown as a rectangle)
• run gulp serve:dist (font awesome works fine)

Let me know if you need more details

[chandruk4321]

I had to change the following line to make it work

•        publicPath: BUILD || DEV || E2E ? '/' : `http://localhost:${8080}/`,
  

•        publicPath: BUILD || DEV || E2E ? `http://localhost:${3000}/` : `http://localhost:${8080}/`,
  

[Gusi]

On windows, I had to change to:

publicPath: BUILD || DEV || E2E ? 'http://localhost:3000/' : 'http://localhost:${8080}/',

But I've only tried with gulp serve by now

[syzer]

👍

[syzer]

@Kannach solution works for me!

[smeks]

I tested the change for publicPath: http://localhost:${3000}/ and the fonts load properly on the local dev machine but any remote devices will not be able to load the page since all resources will try to load from localhost instead of the relative server path.

[ghost]

@Kannach solution is not working for me. Can anybody help me out?

[smirciat]

#2188 might be related

[Awk34]

^ closing, assuming the same solution will fix it

[MichaelJCole]

Hey, ran into this. npm start runs node server.js. So it seems to be designed to work with gulp build. If you want to run a development server, use gulp serve.

FYI: The workaround above broke deploying to heroku because all the built paths were pointing to localhost.