i have already finished coding my app and i try to build it to production mode ,and after testing the app , i see that images not showing in the app as logo ... but the the devloppement mode it's ok . this is the tree of my project :

you can see here the structure of the project in production mode

is it neccessary to add webpack to my project to solve this problem ?

i want also to ask you about the function of webpack , because my project is not including webpack and i found that is neccessary to have it my application .

i have already finished coding my app and i try to build it to production mode ,and after testing the app , i see that images not showing in the app as logo ... but the the devloppement mode it's ok . this is the tree of my project :

you can see here the structure of the project in production mode

is it neccessary to add webpack to my project to solve this problem ?

i want also to ask you about the function of webpack , because my project is not including webpack and i found that is neccessary to have it my application .

• javascript
• image
• angular
• angular-cli
• production-environment

• 1 are your images in dist/assets? are they referenced correctly in your HTML? as for webpack, angular cli uses webpack, no need to add it. – Ahmed Musallam Commented Apr 25, 2017 at 21:58
• How did you build your application? Did you use deployUrl or base-href? Are you getting 404 for images in console? – ulubeyn Commented Apr 26, 2017 at 7:40
• @AhmedMusallam , in my assets , i have a folder named images that contain my images , but in html is not referenced correctly i have to delete some caracter like '../' from the url and then it resolved . – Yassine CHABLI Commented Apr 26, 2017 at 10:37
• 3 problem resolved , i just have change the href from "../assets/images/logo.png" to "assets/images/logo.png " – Yassine CHABLI Commented Apr 26, 2017 at 10:39
• 1 I am also facing the same issue. Changing the image path from "../assets/images/logo.png" to "assets/images/logo.png" into prod build should not be the ideal solution. Looking for some descent solution. Please help. – Devesh M Commented Oct 30, 2018 at 8:48

3 Answers 3

Personally i don't even know what it is a webpack (and i'm not proud of it), but i know why you are having that issue.

You should take off the slash in the beginning of the images paths. So you have to use <img src="assets/image.png" and not <img src="/assets/image.png"

just to add on the @CybrRob 's answer.

Angular looks for the images in the assets folder, so in your html, use <img src="assets/image.png" Don't include the "../"

just change your path from

<img src="../../assets/g5.jpg" alt="">

to

<img src="assets/g5.jpg"  alt="">