CODEWITHSUNDEEP
javascriptangularjsangular
Temp O'rary
Temp O'rary

Reputation: 5808

Angular 7+ : Images in assets folder does not appear

Info about my Angular version:
Angular CLI: 7.3.9 

Node: 10.15.3   
OS: win32 x64   
Angular: 7.2.15   
... animations, common, compiler, compiler-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 compiled 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?

Upvotes: 3

Views: 16443

Answers (5)

JWP
JWP

Reputation: 6963

Want a background image? this works.

src
--app
  --customComponent
--assets

in customComponent.css

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

Upvotes: 1

Bytech
Bytech

Reputation: 1215

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 compiled and generated in the dist folder itself.

Try creating or moving your project to a different drive. E.g. Frank's comment 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 compiled version, and hence that this is probably not the issue here.

Upvotes: 1

Mohammadreza Imani
Mohammadreza Imani

Reputation: 340

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.

Upvotes: -1

Rene T
Rene T

Reputation: 54

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

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

Upvotes: 1

nircraft
nircraft

Reputation: 8478

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"
            ],

Upvotes: 0

Related Questions