未在Angular 2中加载的图像

Question

HTML文件：

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

这里的New-Google-Logo.png与html文件位于同一文件夹中。但是在ng服务之后，html页面会加载其他细节，而不是图像。通过直接提供图像链接（例如www.google.com/images/x.png）尝试，它可以工作，但不加载本地文件。

文件夹树：

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

这里的New-Google.png在logincomponent.html中引用，如上所述。

试试2：

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

并在html中提到：

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

这两件事都没有成功。

Answer 1

如果您使用的是angular-cli，则所有静态资产都应保存在assets文件夹中。然后你应该给路径

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

当您为项目提供服务时，需要将所有静态资产提供给客户端，以便在客户端上显示它。 Angular cli在js文件中构建并捆绑整个项目。要提供静态资产，您可以采用两种方式

• 将所有静态资源放在assets-cli服务的assets文件夹中，默认为.angular-cli.json
• 或者您需要在名为资产的数组中的.angular-cli.json文件中输入静态资源文件夹，因为我的图像文件夹位于静态文件夹中，而静态文件夹位于资源文件夹的相同层级 "assets": [ "assets", "static/images" ]

Answer 2

如果使用CLI创建项目，您将拥有一个资源文件夹，只需在其中创建一个图像文件夹并将所有图像粘贴到其中.png类型然后给出 在你的html中引用src =“assets / images / AnyImage.png”它将加载图像。实际上，您将图像粘贴到loginComponent文件夹中。试试这个它会起作用。