Image not loading after "build" in angular8

Question

The issue is the path of the image located in "assets" folder is not loading after ng build.

I am running ng build after changing the path to <base href="/skstose/"> of index.html.

Dev environment means ng serve. Prod environment means ng build after compiling.

1) The below issue is in dev environment:-

Module Error (from ./node_modules/postcss-loader/src/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError:
Can't resolve 'assets/images/skistose/kgExtract.png' in 'E:\Workspace\skistose\src\app\skistose-kg-extract'

> 2 |   background: url("assets/images/skillStore/kgExtract.png") no-repeat;
                    ^

2) The below issue is in prod environment:-

.css

.bg{
    background: url(/assets/images/skillStore/kgExtract.png) no-repeat
}

is working in dev environement but not in prod environment.

.css

.bg{
    background: url(assets/images/skillStore/kgExtract.png) no-repeat
   }

is working in prod environment but not in dev environment.

However, <img src="assets/images/skillStore/uploadFile.png"> is working fine in dev environment as well as 'prod environment'.

In dev environment ,

 <base href="/">

In prod build:-

 <base href="/skstose/">

rajhim · Accepted Answer · 2019-07-12 09:33:11Z

2

Dont edit in index html;

for building in url try this code:-

ng build --prod --base-href='/skstose/'

Url link will be open like this 'http:/test.com/skstose'

Here is the resources:- https://angular.io/guide/deployment

edited Jul 12, 2019 at 9:33

answered Jul 10, 2019 at 11:48

rajhim

2693 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Manzer A Over a year ago

still same issue

rajhim Over a year ago

url path will be same "url(assets/images/skillStore/kgExtract.png) no-repeat" just build with ng build --prod --base-href='/skstose/'

Manzer A Over a year ago

but in dev environment ng serve, its not loading image.

rajhim Over a year ago

in dev server what did u put ur url path ?

Manzer A Over a year ago

background: url(/assets/images/skillStore/kgExtract.png) no-repeat ... this is working but background: url(assets/images/skillStore/kgExtract.png) no-repeat not working.

|

Suhas Mandumale · Accepted Answer · 2019-07-10 10:51:15Z

0

Are you getting assets folder after ng build in your dist folder?

if not try with ng build --prod and check

answered Jul 10, 2019 at 10:51

Suhas Mandumale

951 gold badge3 silver badges10 bronze badges

1 Comment

Manzer A Over a year ago

I am just trying for ng build and changing the path to <base href="/skstose/"> of index.html. When inspecting image on google chrome dev tool , the issue I found.

Jhonatan_Celis · Accepted Answer · 2020-10-23 16:28:17Z

0

Your file "index.html" must contain:

<base href="/">

Try searching for your image this way

background-image: url(../../../../../assets/My-image_2020.jpg);

And build your project whit

ng build --prod --base-href /skstose/

The end result(compiled) is in charge of giving context to your files

PD: to work locally it is not necessary to change the path in <base href="/"> of index.html

answered Oct 23, 2020 at 16:28

Jhonatan_Celis

212 bronze badges

Collectives™ on Stack Overflow

Image not loading after "build" in angular8

.css

.css

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

.css

.css

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related