html - Angular 4 显示图像

Question

我正在尝试添加 Angular 为 4 的图像......但没有成功

我的文件夹:

来源

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

- assets
    - images
        play-3.png

favicon.ico

我尝试过的:

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

错误:

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"
  ],

解决方案:- 在 pgn 上传后重启 ng serve

Answer 1

在 angular-cli.json 中你应该有这个:

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

assets 是静态文件的文件夹，好的，现在你必须将图像放在文件夹中 assets/src/assets/images/play-3.png，最后你可以访问图像，从你的 app.component .html，包含:

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