Angular 7+ : Images in assets folder does not appear

Question

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?

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

Bytech · Accepted Answer · 2019-05-10 07:44:45Z

1

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.

answered May 10, 2019 at 7:44

Bytech

1,2158 silver badges26 bronze badges

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

2 Comments

Temp O'rary Over a year ago

Yes, it worked on a machine with lesser to no restriction which is why I doubted this possibility. Granting +1 for confirming my suspicion. Definitely the IT has something blocked which is turning into a hindrance. But I will need to identify and present it before them to believe and remove whatever is blocking it. Can you help me how can I identify this? What in a system would block innocent png/jpg images on localhost?

Temp O'rary Over a year ago

Finally from the clue that you gave, I was able to identify the issue. My project files were in my Dropbox folder (which is integrated with my file explorer) which is why it prevented the images from appearing. Thank you. Please update your answer with this.

Rene T · Accepted Answer · 2019-05-09 15:51:16Z

1

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

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

answered May 9, 2019 at 15:51

Rene T

544 bronze badges

1 Comment

Rene T Over a year ago

Can you please share your whole angular.json file. And a screenshot about your project tree.

JWP · Accepted Answer · 2019-11-14 18:22:12Z

1

Want a background image? this works.

src
--app
  --customComponent
--assets

in customComponent.css

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

answered Nov 14, 2019 at 18:22

JWP

6,9853 gold badges59 silver badges77 bronze badges

Comments

nircraft · Accepted Answer · 2019-05-09 15:00:41Z

0

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

answered May 9, 2019 at 15:00

nircraft

8,5085 gold badges33 silver badges46 bronze badges

3 Comments

Temp O'rary Over a year ago

Its already there as it comes in a new default angular scaffolding app generated by angular cli. My question also updated with this.

nircraft Over a year ago

try using the image src as relative: src="assets/images/logo.png" Also what value do you have in root in angular.json?

Temp O'rary Over a year ago

"projects": { "myapp": { "root": "", "sourceRoot": "src", I checked the path it is correct (updated my question with explanation to this)

Mohammadreza Imani · Accepted Answer · 2019-05-09 16:35:14Z

-1

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.

answered May 9, 2019 at 16:35

Mohammadreza Imani

3606 silver badges15 bronze badges

1 Comment

Mohammadreza Imani Over a year ago

may I see your directory structure?

Collectives™ on Stack Overflow

Angular 7+ : Images in assets folder does not appear

5 Answers 5

2 Comments

1 Comment

Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related