Angular 6 assets folder is not getting rendered on browser

Question

I'm learning angular, I'm trying to load the local images inside the assets folder into main.component.html and I have set the path correctly, while I do alt+click on the path it opens the image. But the image was not loaded on the browser.

The error I get

In the sources tab in chrome developer tools, there is no assets folder included

Here is my angular cli version

I tried this https://github.com/angular/angular-cli/issues/5268 but of no use, Someone please help Here is my angular.json file

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "game-of-thrones": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/game-of-thrones",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css",
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "./node_modules/font-awesome/css/font-awesome.css"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "game-of-thrones:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "game-of-thrones:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "game-of-thrones:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "game-of-thrones-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "game-of-thrones:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "game-of-thrones"
}

Solution

I have the same problem

GET http://localhost:4200/assets/img/img.png 404 (Not Found)

but I fixed it by removing all the special character ('(','@','$' etc) in the project path. For example, if you have a project path like

C:\angular-projects(1)\angularapp

then change it to

C:\angularprojects1\angularapp

Comments

[user184994]

Can you please add your angular.json?

[David]

Can you show exactly which url gives a 404 error? And did you restart ng serve after modifying the assets folder?

[Avinash Dv]

@user184994 I have added angular.json file have a look,

[Avinash Dv]

@David Here is a link to what my folder structure is and the img tag I used in the code [link] (imgur.com/a/fpJQgL3), I have done restarting ng serve after modifying the assets folder, but nothing seems to work.

[David]

Your path /../../assets/books.jpg looks incorrect. It should just be /assets/books.jpg If not, show the rreal, final URL failing from chrome's network tab

[Avinash Dv]

@David I have tested it with /assets/books.jpg still no success, Final url failing in the sense the error that i get on console, if so I have attached it in the question, clicking on it takes me here [link] (imgur.com/a/z8q2EmL)

[David]

You just showed the error in red, not. I want to see what url is called exactly for books.jpg in the network tab. If you click the failing ressource on network tab, a new pane pops up with the absolute URL called

[Avinash Dv]

@David link Here is the link to images related to it have a look

[David]

Try modifying angular.json and set the asset like this: "assets": [ "favicon.ico", "assets" ], (to remove src) Then restart ng serve

[Avinash Dv]

@David No Success :(

[Avinash Dv]

Found a solution to the above problem by removing all special characters,symbols to the folder location of the app, have a look at this Git hub link

[Avinash Dv]

@Satineder Bajwa Solved the problem long ago,This is what I followed before that worked, anyway thanks for taking your time to help me

[Satinderpal Singh]

@AvinashDv this is a community to help each other if you already found the answer then you should have posted an answer to your own question to help others.

[Avinash Dv]

@Satineder Bajwa I posted that, I found answer in comments of my question the very next day also given a link where I found the solution to the problem, I should post in the answer section will do it now, thank you