图像未在Angular 2中加载 [英] Images not loading in Angular 2

问题描述

HTML文件:

 <div>
      <img  src="New-Google-Logo.png"/>
    </div>

此处，New-Google-Logo.png与html文件位于同一文件夹中.但是在ng服务后，html页面会加载其他详细信息，而不是图像.通过直接提供图像的链接(例如www.google.com/images/x.png)进行了尝试，它可以工作，但是本地文件未加载.

Here the New-Google-Logo.png is in the same folder as in the html file. But after ng serve the html page loads with other details, but not the image. Tried by directly giving a link for an image (like www.google.com/images/x.png), it works, but local file is not loading.

文件夹树:

src
  -app
    -logincomponent
              - logincomponent.html
              - logincomponent.css
              - New-Google-Logo.png
              - logincomponent.ts
     -homecomponent
              - homecomponent.html
              - homecomponent.css
              - homecomponent.ts

在此处，如上所述，在logincomponent.html中引用了New-Google.png.

Here the New-Google.png is referred inside logincomponent.html as given above.

尝试2:

src
  -app
    -logincomponent
              - logincomponent.html
              - logincomponent.css
              - Images
                - New-Google-Logo.png
              - logincomponent.ts

并在html中引用为:

And referred in the html like :

<div>
      <img  src="./images/New-Google-Logo.png"/>
 </div>

这两个都没有解决.

推荐答案

如果您使用angular-cli，则所有静态资产都应保存在资产文件夹中.然后，您应将路径指定为

If you are using angular-cli then all your static assets should be kept in assets folder. Then you should give path as

 <div>
      <img  src="assets/images/New-Google-Logo.png"/>
 </div>

在为项目提供服务时，需要将所有静态资产提供给客户端，以便在客户端上显示. Angular CLI将整个项目构建并捆绑到js文件中.要提供您的静态资产，您可以按照以下两种方式

When you serve the project all static assets needs to be served to client in order to display it on client. Angular cli build and bundle entire project in js files. To serve your static assets you can follow two ways

• 将您的所有静态资产放入angular-cli默认设置为.angular-cli.json的Assets文件夹中

• ，否则您需要在名为数组的数组中的.angular-cli.json文件中的静态资产文件夹中输入静态文件夹，因为我的图像文件夹位于静态文件夹中，并且静态文件夹与资产文件夹处于相同的层次结构级别

• put all your static assets in assets folder which angular-cli serves with default .angular-cli.json

• or you need to make entry of the static assets folder in .angular-cli.json file in array named as assets as my images folder is in static folder and static folder is at same hierarchy level of assets folder

"assets": [ "assets", "static/images" ]

这篇关于图像未在Angular 2中加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！