javascript - Angular 7+ : Images in assets folder does not appear - Stack Overflow

admin 管理员组

文章数量: 1086019

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

Share Improve this question Follow edited May 10, 2019 at 7:11 Temp O'rary asked May 9, 2019 at 14:53 Temp O'raryTemp O'rary 5,8381515 gold badges5353 silver badges114114 bronze badges 2

• 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

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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 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.

本文标签： javascriptAngular 7Images in assets folder does not appearStack Overflow