title: Angular 8: assets not loading
body: <p>I'm trying to use (image) assets in a brand new angular (8.0.3) project.
  I've looked into the <a href="https://angular.io/guide/workspace-config#project-asset-configuration" rel="nofollow noreferrer">asset configuration</a> from the docs. Judging by the information there it should work out of the box?</p>
  <p>So I created an image folder and put a random .jpg image in there.</p>
  <pre><code>ls src/assets/images
  paladin.jpg
  </code></pre>
  <pre><code>ls src
  app  assets  environments  favicon.ico  index.html  main.ts  polyfills.ts  styles.css  test.ts
  </code></pre>
  <p>angular.json <em>(this is all default)</em></p>
  <pre><code>  &quot;assets&quot;: [
                &quot;src/assets&quot;,
                &quot;src/favicon.ico&quot;
              ],
              &quot;styles&quot;: [
                &quot;src/styles.css&quot;
              ],
              &quot;scripts&quot;: []
  </code></pre>
  <p>In index.html we have <em>(also default)</em></p>
  <pre><code>&lt;link rel=&quot;icon&quot; type=&quot;image/x-icon&quot; href=&quot;favicon.ico&quot;&gt;
  </code></pre>
  <p>app.component.html <em>(I changed the base64 logo with the assets image)</em></p>
  <pre><code>&lt;img width=&quot;300&quot; alt=&quot;Angular Logo&quot; src=&quot;assets/images/paladin.jpg&quot;&gt;
  </code></pre>
  <p>But nothing is loading or copies to the 'dist' directory.</p>
  <p>The closest I've come to an answer are old threads:</p>
  <ul>
  <li><a href="https://stackoverflow.com/questions/50840734/angular-5-images-not-loading-from-assets-directory">Angular 5 images not loading from assets directory</a></li>
  <li><a href="https://stackoverflow.com/questions/49001649/assets-folder-issue">Assets folder issue</a></li>
  </ul>
  <pre><code>ng serve
  ng build
  </code></pre>
  <p>Same result...even favicon.ico isn't loading...</p>
  <p>I've tried:</p>
  <pre><code>&lt;img width=&quot;300&quot; alt=&quot;Angular Logo&quot; src=&quot;./assets/images/paladin.jpg&quot;&gt;
  &lt;img width=&quot;300&quot; alt=&quot;Angular Logo&quot; src=&quot;assets/images/paladin.jpg&quot;&gt;
  &lt;img width=&quot;300&quot; alt=&quot;Angular Logo&quot; src=&quot;../assets/images/paladin.jpg&quot;&gt;
  &lt;img width=&quot;300&quot; alt=&quot;Angular Logo&quot; [src]=&quot;assets/images/paladin.jpg&quot;&gt;
  &lt;img width=&quot;300&quot; alt=&quot;Angular Logo&quot; [src]=&quot;'assets/images/paladin.jpg'&quot;&gt;
  </code></pre>
  <h3>How to reproduce</h3>
  <pre><code>ng new myTestApp
  # =&gt; routing y/N doesn't matter
  # =&gt; css option
  ng serve --open
  </code></pre>
  <p>=&gt; favicon gives 404</p>
  <p>Am I missing something obvious here? :)</p>
  <p>More info that might help:</p>
  <pre><code>$ 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
  </code></pre>
  <p>Full angular.json: <a href="https://pastebin.com/HaeKmQZ0" rel="nofollow noreferrer">https://pastebin.com/HaeKmQZ0</a></p>