Assets/Images not being served...

See original GitHub issue

Versions

Angular CLI: 1.6.6
Node: 6.9.4
OS: win32 x64
Angular: 5.2.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
@angular/cli: 1.6.6
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.6
@schematics/angular: 0.1.17
typescript: 2.5.3
webpack: 3.10.0

Repro steps

  1. add any image to /src/assets/images/
  2. reference image in HTML
  3. ng serve

Observed behavior

image is not found Request URL:http://localhost:4200/assets/images/logo.png Request Method:GET Status Code:404 Not Found

I have made sure that my angular-cli.json lists the assets folder… image Assets folder directly under src directory image HTML is typical

  <img src="./assets/images/logo.png"/>

Image is 404 image

Here is a minimal example… https://github.com/smatthews1999/testng

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:44 (1 by maintainers)

github_iconTop GitHub Comments

41reactions
luoguibincommented, Mar 22, 2018

@smatthews1999 <img src="assets/images/ic_launcher.png"> It ran successfully for me.

38reactions
avinashdvcommented, Jun 10, 2018

@aajmot I thought I should downgrade to 1.6.3 to overcome, Luckily found out a solution without downgrading, just remove all the symbols, brackets for all your folders starting from particular drive. If u’r project is in E drive follow below change this location

E:\Data\project - 1\Angular(learning)\app

to

E:\Data\project1\Angularlearning\app

U will be able to see the loaded assets folder to the browser under sources tab in chrome developer tools

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular 6 Failing To Load Images From Assets - Stack Overflow
Any idea why this is not working? My image.png is in my assets folder which is located at src/assets/image.png. Update: So we did...
Read more >
Images not loading from assets folder in Angular
Angular resolves this problem for you, and in a component, you have to only add a path to the assets folder, instead of...
Read more >
Basic Features: Static File Serving - Next.js
Next.js allows you to serve static files, like images, in the public ... The name cannot be changed and is the only directory...
Read more >
Assets (images) return a 404 on the front-end
@megatrond No, I want the images to be served from example.com/images/ but I don't think the folder path should necessarily match that url...
Read more >
I cannot get an image to display - Help - Jekyll Talk
You'll need to place it in another folder (not something with an _ underscore). The suggestion above is a good one. Create /assets/images/...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found