Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Tracy Nickel
Tracy Nickel
7,430 Points

Assets folder in Angular 4

I have started an Angular 4 project. I have placed images in the assets folder. When I do ng serve on my local host I can see the images correctly. I am now trying to share with my team via our website. I ran ng build --base-href /my-app/ as I placed a folder on the site to house all the Angular files as to not disturb the original site while I work. I copied the dist folder into this location on the server. When I type the location into the browser everything but my images are working. I am getting a not found error on my images. They are in the assets folder. If I change the relative path name of the image it will break my local host view and still not show in the browser. Has anyone seen this recently? Everything I have come across seems to be out dated information...

1 Answer

Olugbenro Selere
Olugbenro Selere
522 Points
Olugbenro Selere
Olugbenro Selere
522 Points

In your app.module.ts add this to your @NgModule

providers: [
    { provide: LocationStrategy, useClass: PathLocationStrategy }
]

Using PathLocationStrategy would give you the absolute path to whatever file you are accessing from the assets folder.

Then in the html for the component your working with, for the img src set it as:

<img src="assets/whatever-image.png" />