Info about my Angular version:
Angular CLI: 7.3.9

Node: 10.15.3   
OS: win32 x64   
Angular: 7.2.15   
... animations, mon, piler, piler-cli, core, forms   
... language-service, platform-browser, platform-browser-dynamic    
... router 

Issue that I'm facing is:

In dev build/environment:
Images in Angular's assets folder does not appear.
When you check the path it shows up as "http://localhost:4200/assets/sample.jpg" with HTTP error 404 (Not Found).
In HTML template it is written as
<img width="300" alt="Angular Logo" src="assets/sample.jpg">
sample.jpg lies in this folder myapp/src/assets/sample.jpg

In prod build/environment:
assets folder does not get piled and generated in the dist folder itself hence, it does not appear here as well.

This is the case with even a fresh project generated from Angular CLI. This also happens with the favicon.

This is my assets array under build and test in angular.json.

    "assets": [
      "src/favicon.ico",
      "src/assets"
    ],

I verified my file name and path.
Tried creating a couple of isolated projects on the same machine.

PS:
Now I'm starting to doubt whether it is due to some machine restriction. I'm working on a machine with limited user access setup. Could this be the reason? Any system level restriction can prevent images from loading?

Info about my Angular version:
Angular CLI: 7.3.9

Node: 10.15.3   
OS: win32 x64   
Angular: 7.2.15   
... animations, mon, piler, piler-cli, core, forms   
... language-service, platform-browser, platform-browser-dynamic    
... router 

Issue that I'm facing is:

In dev build/environment:
Images in Angular's assets folder does not appear.
When you check the path it shows up as "http://localhost:4200/assets/sample.jpg" with HTTP error 404 (Not Found).
In HTML template it is written as
<img width="300" alt="Angular Logo" src="assets/sample.jpg">
sample.jpg lies in this folder myapp/src/assets/sample.jpg

In prod build/environment:
assets folder does not get piled and generated in the dist folder itself hence, it does not appear here as well.

This is the case with even a fresh project generated from Angular CLI. This also happens with the favicon.

This is my assets array under build and test in angular.json.

    "assets": [
      "src/favicon.ico",
      "src/assets"
    ],

I verified my file name and path.
Tried creating a couple of isolated projects on the same machine.

PS:
Now I'm starting to doubt whether it is due to some machine restriction. I'm working on a machine with limited user access setup. Could this be the reason? Any system level restriction can prevent images from loading?

• javascript
• angularjs
• angular

• make sure you've added "src/assets" to the assets array in angular.json file. – rgantla Commented May 9, 2019 at 14:58
• Its already there as it es in a new default angular scaffolding app generated by angular cli. My question also updated with this. – Temp O'rary Commented May 9, 2019 at 15:06

5 Answers 5

Temp O'rary: this definitely could be an access rights issue, and from everything I read, it probably is. I say that because you mention assets folder does not get piled and generated in the dist folder itself.

Try creating or moving your project to a different drive. E.g. Frank's ment at Angular 6 Failing To Load Images From Assets describes him storing his code in BitBucket, which was causing him what sounds like the same issue that you're experiencing.

It also sounds like you've enough a tech background to know that case sensitivity in file can affect things, but... since you're using the CLI to generate the project, I'm thinking you should at least be seeing assets in the piled version, and hence that this is probably not the issue here.

Try adding './' in front of assets/...

<img width="300" alt="Angular Logo" src="./assets/sample.jpg">

Want a background image? this works.

src
--app
  --customComponent
--assets

in customComponent.css

:host{
  background-image : url("~src/assets/equaljustice.PNG");
}

Make sure you have the assets declared in angular.json: Under architect --> build:

architect": {
        "build": {
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "assets": [
              "src/assets"
            ],

you can use

<img width="300" alt="Angular Logo" src="../../assets/sample.jpg">

each "../" is referring to one directory before your current directory. for example, if you are in src/app/someComponent you must use "../../assets to get access to your assets directory because assets and src are in the same directory.