How to get to the public directory

Question

I use angular-cli in my project, and I want to use a global image - my website logo image.

As I understand the public directory at the root of the project (which angular-cli created) is for public assets - which seems like a good place to put my image (please correct me if I'm wrong).

But, when I try to get to that image in my <img src="/public/book4u-logo.svg" /> tag, I get 404. The reason is, of course, my project root is the src directory and not the project root directory.

So, how should I get to that directory? Or should I place my image in another directory?

My project tree (i remove the unnecessary suff):

.
├── angular-cli-build.js
├── angular-cli.json
├── package.json
├── public
│   ├── book4u-logo.svg
│   └── hero-image-default.jpg
├── src
│   ├── app
│   │   ├── bfy.component.html
│   │   ├── bfy.component.scss
│   │   ├── bfy.component.ts
│   │   ├── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── system-config.ts
│   ├── tsconfig.json
│   └── typings.d.ts
├── tslint.json
└── typings.json

The img tag is at /src/app/bfy.component.html and the image itself is at /public/book4u-logo.svg.

Solution 1

The Angular-cli places all files in the /dist directory.

To display the image in index.html: <img src="book4u-logo.svg" />

If you want to use your image in your app you should use a folder in the /src directory like src/shared/assets/img/book4u-logo.svg

The public folder is for public assets and the content is copied to the /dist folder. However, when running ng build --prod the javascript in the/public folder is not copied over to /dist.

There is an open issue on Github:Static JS assets not copying The image placed in the public folder should be accessible from the dist folder.

Solution 2

Latest version of angular-cli(angular-cli: 1.0.0-beta.19-3) provides an assets folder under src directory. You just need to add src property of an image tag as below, <img src="./assets/logo.png">

Note: When you build the project using ng serve it will copy your assets folder to dist folder.

Solution 3

I solved a similar problem in Angular 4 (I had a css file that was in public folder and I put it in assets folder). The answer would be:

• file path: ./src/assets/book4u-logo.svg
• <img src="./assets/book4u-logo.svg>

Comments

[72GM]

makes it clear that you should use "./assets" rather "./src/..." ... spent ages scratching my head on this one...