Angular 8: assets not loading

user_2894569 0
Viewed 21746

I'm trying to use (image) assets in a brand new angular (8.0.3) project. I've looked into the asset configuration from the docs. Judging by the information there it should work out of the box?

So I created an image folder and put a random .jpg image in there.

ls src/assets/images
paladin.jpg

ls src
app  assets  environments  favicon.ico  index.html  main.ts  polyfills.ts  styles.css  test.ts

angular.json (this is all default)

  "assets": [
              "src/assets",
              "src/favicon.ico"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []

In index.html we have (also default)

<link rel="icon" type="image/x-icon" href="favicon.ico">

app.component.html (I changed the base64 logo with the assets image)

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

But nothing is loading or copies to the 'dist' directory.

The closest I've come to an answer are old threads:

ng serve
ng build

Same result...even favicon.ico isn't loading...

I've tried:

<img width="300" alt="Angular Logo" src="./assets/images/paladin.jpg">
<img width="300" alt="Angular Logo" src="assets/images/paladin.jpg">
<img width="300" alt="Angular Logo" src="../assets/images/paladin.jpg">
<img width="300" alt="Angular Logo" [src]="assets/images/paladin.jpg">
<img width="300" alt="Angular Logo" [src]="'assets/images/paladin.jpg'">

How to reproduce

ng new myTestApp
# => routing y/N doesn't matter
# => css option
ng serve --open

=> favicon gives 404

Am I missing something obvious here? :)

More info that might help:

$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 8.0.3
Node: 10.16.0
OS: win32 x64
Angular: 8.0.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.3
@angular-devkit/build-angular     0.800.3
@angular-devkit/build-optimizer   0.800.3
@angular-devkit/build-webpack     0.800.3
@angular-devkit/core              8.0.3
@angular-devkit/schematics        8.0.3
@angular/cli                      8.0.3
@ngtools/webpack                  8.0.3
@schematics/angular               8.0.3
@schematics/update                0.800.3
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.30.0


$ npm list -g --depth=0
C:\Users\jonghena\AppData\Roaming\npm
`-- @angular/cli@8.0.3

$ npm list --depth=0
my-test-app@0.0.0 D:\Gitprojects (GitHub)\angular-test\myTestApp
+-- @angular-devkit/build-angular@0.800.3
+-- @angular/animations@8.0.2
+-- @angular/cli@8.0.3
+-- @angular/common@8.0.2
+-- @angular/compiler@8.0.2
+-- @angular/compiler-cli@8.0.2
+-- @angular/core@8.0.2
+-- @angular/forms@8.0.2
+-- @angular/language-service@8.0.2
+-- @angular/platform-browser@8.0.2
+-- @angular/platform-browser-dynamic@8.0.2
+-- @angular/router@8.0.2
+-- @types/jasmine@3.3.13
+-- @types/jasminewd2@2.0.6
+-- @types/node@8.9.5
+-- codelyzer@5.1.0
+-- jasmine-core@3.4.0
+-- jasmine-spec-reporter@4.2.1
+-- karma@4.1.0
+-- karma-chrome-launcher@2.2.0
+-- karma-coverage-istanbul-reporter@2.0.5
+-- karma-jasmine@2.0.1
+-- karma-jasmine-html-reporter@1.4.2
+-- protractor@5.4.2
+-- rxjs@6.4.0
+-- ts-node@7.0.1
+-- tslib@1.10.0
+-- tslint@5.15.0
+-- typescript@3.4.5
`-- zone.js@0.9.1

Full angular.json: https://pastebin.com/HaeKmQZ0

angular
3 Answers

It seems to be due to the parentheses in your workspace path: D:\Gitprojects (GitHub)\angular-test\myTestApp.

I don't know if the issue is reported in Angular's Github, but I suggest to check and report it.

As a workaround, you can remove your parentheses from your workspace path...

user_33714400

I think I found the issue:

  • 'my test' => works
  • 'my test(12)' => doesn't work
  • myTestApp2 => works

So I think the culprit is the path: "D:\Gitprojects (GitHub)\angular-test\myTestApp"

user_28945690

I also had exactly the same problem on Angular 8, with loading local images, with the html, img, src tags. In my case the project's path was absolutely fine: /home/1/app-spa

I had the "src/assets" in angular.json file, and put an image 1.png directly into the assets folder (with no subfolder there).

And surprisingly after running ng-serve, I could not see the image when trying to access it on Firefox Browser with url or img tag:

http://localhost:4200/assets/1.png

Getting 404 not found

However, exactly the same URL opened correctly on Chrome.

I found out that in my firefox browser I had disabled option to display local images, in the Page Info Settings (Ctrl + I) to access, as on the attached image. After changing this Firefox setting the image started to display properly, same as on Chrome. I took me half a day to figure this out.

[Firefox Page Info Settings][1]
[1]: https://i.stack.imgur.com/Pv4Du.jpg

user_60265340
Related