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: Angular 5 images not loading from assets directory Assets folder issue 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 Continue reading...
