Angular 8: assets not loading

Question

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/[email protected]

$ npm list --depth=0
[email protected] D:\Gitprojects (GitHub)\angular-test\myTestApp
+-- @angular-devkit/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

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

It sadly doesn't, I just tried it again. But is it normal that out of the box, favicon.ico gives a 404 without me even changing any code ? — Joris Onghena
– Joris Onghena, Commented Jun 24, 2019 at 12:09
No it's not. After creating an app you could access to the favicon through http://localhost:4200/favicon.ico and to the image like this: <img src="assets/images/paladin.jpg" />. Did you change some Angular configuration? — youri
– youri, Commented Jun 24, 2019 at 12:15
So, after you do 'ng build --prod', and then look into the dist folder, you do not see an assets folder there? — Mathias
– Mathias, Commented Jun 24, 2019 at 12:16
@Mathias my full angular.json: pastebin.com/HaeKmQZ0 like i said I havn't touched it but I do see now that there are 2 sections, both are the same. — Joris Onghena
– Joris Onghena, Commented Jun 24, 2019 at 12:33

youri · Accepted Answer · 2019-06-24 12:46:51Z

6

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...

answered Jun 24, 2019 at 12:46

youri

1,1608 silver badges19 bronze badges

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

1 Comment

Joris Onghena Over a year ago

Indeed I just tried it and it fails with those "special characters" in the path.

Joris Onghena · Accepted Answer · 2019-06-24 12:53:05Z

4

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"

answered Jun 24, 2019 at 12:53

Joris Onghena

1451 gold badge1 silver badge11 bronze badges

3 Comments

youri Over a year ago

Yes, that's it (as I answer just before you :)). It seems to be resolved in Angular 6 github.com/angular/angular-cli/issues/9852... Maybe you should reopen an issue on Github.

Joris Onghena Over a year ago

I've updated the issue on GitHub. At the very least I hope it saves someone a headache.

Leponzo Over a year ago

@youri, just wondering: if it was resolved in Angular 6 like you said, how did OP have a problem with it in Angular 8? Regression bug?

Ruslan López · Accepted Answer · 2024-12-03 03:42:06Z

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.

Collectives™ on Stack Overflow

Angular 8: assets not loading

How to reproduce

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

How to reproduce

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related