Angular 5 - Can't output an Image using src?

Question

I am using Angular 5 in an attempt to display an image that I have sat in a file 2 directories up from where I have the HTML, however I simply get the blank image box and an error in the console of:

GET http://localhost:4200/logo.jpg 404 (Not Found)

I am attempting to output via the code:

<img src="../../logo.jpg">

I have tested by placing a placeholder.it image within the src which worked perfectly... For some reason this will not?

You have to copy the image using .angular-cli.json. Your image is missing from the output folder. — FAISAL
– FAISAL, Commented Feb 1, 2018 at 16:02

Alexander Staroselsky · Accepted Answer · 2018-02-01 16:04:04Z

5

If you are using @angular/cli you'd need to place your images under /src/assets/ in line with the .angular-cli.json asset configuration. You can then just use the image directly such as:

<img src="assets/pa-logo.jpg">

You can create additional folders under "assets" property in .angular-cli.json for additional control/organization as necessary:

  "assets": [
    "assets",
    "foobar",
    "favicon.ico"
  ],

Usage after you placed pa-logo.jpg in the this hypothetical foobar folder:

<img src="foobar/pa-logo.jpg">

Hopefully that helps!

answered Feb 1, 2018 at 16:04

Alexander Staroselsky

39k16 gold badges83 silver badges98 bronze badges

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

2 Comments

physicsboy Over a year ago

Aha! What a strange thing to happen. Why wouldn't you be able to use an image based anywhere? :-(

Alexander Staroselsky Over a year ago

Effectively behind the scenes webpack is resolving paths as part of build process. You could alternatively use path relative to the root I believe.

Collectives™ on Stack Overflow

Angular 5 - Can't output an Image using src?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related