Angular 4 display images

Question

I am trying to add an image with angular 4 ... but without success

My folders :

src

- app
    - job
        job.component.css
        job.component.html
        job.component.specs.ts
        job.component.ts

- assets
    - images
        play-3.png

favicon.ico

What I have tried :

 <a href="ta_page" ><img src="../assets/images/play-3.png"/></a>
 <a href="ta_page" ><img src="../../assets/images/play-3.png"/></a>
 <a href="ta_page" ><img src="../../../assets/images/play-3.png"/></a>
 <a href="ta_page" ><img src="/assets/images/play-3.png"/></a>
 <a href="ta_page" ><img src="./assets/images/play-3.png"/></a>
 <a href="ta_page" ><img src="/assets/images/play-3.png"/></a>
 <a href="ta_page" ><img src="assets/images/play-3.png"/></a>
 <a href="ta_page" ><img src="./assets/images/play-3.png"/></a>
 <a href="ta_page" ><img src="assets\images\play-3.png"/></a>
 <a href="ta_page" ><img src="images/play-3.png"/></a>
 <a href="ta_page" ><img src="favicon.ico"/></a>
 <a href="ta_page" ><img src="./play-3.png"/></a>
 <a href="ta_page" ><img src="app/assets/images/play-3.png"/></a>              
 <img ng-src="assets/images/play-3.png">
 <img ng-src="images/play-3.png">

error :

Cannot GET /play-3.png

If I put favicon it works ....

I tried to put my images into /src, src/assets, src/assets/images ...

Edit :

my .angular-cli.json

  "apps": [
{
  "root": "src",
  "outDir": "dist",
  "assets": [
    "assets",
    "favicon.ico"
  ],

Solution : - Restart ng serve after pgn upload

Answer 1

In angular-cli.json you should have this:

> "apps": [
>     {
>       "root": "src",
>       "outDir": "dist",
>       "assets": [
>         "assets",
>         "favicon.ico"
>       ]

assets is the folder to static files, ok,now you have to put the images in a folder into assets /src/assets/images/play-3.png, finally you can access to image, from you app.component.html, with:

<img src="/images/play-3.png"/></a>