图像未在 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>

这两个都没有解决。

原文由 Amal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

• 将所有静态资产放在 angular-cli 默认使用 .angular-cli.json 的资产文件夹中
• 或者您需要在名为资产的数组中的 .angular-cli.json 文件中输入静态资产文件夹，因为我的图像文件夹位于静态文件夹中，而静态文件夹与资产文件夹处于同一层次结构级别

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

原文由 Prathmesh Dali 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

将路径更改为

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

并添加高度和宽度

 <img  src="assets/images/New-Google-Logo.png" width="200" height="100">

原文由 Codelover 发布，翻译遵循 CC BY-SA 4.0 许可协议