图片未在 Angular 2 中加载答案

【问题标题】：Images not loading in Angular 2图片未在 Angular 2 中加载
【发布时间】：2018-02-05 19:48:10
【问题描述】：

HTML 文件：

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

这里的 New-Google-Logo.png 与 html 文件位于同一文件夹中。但是在 ng serve 之后，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>

这两个都没有成功。

【问题讨论】：

您是否在控制台中遇到任何错误？
你能添加你的文件夹树吗
@ovokuro 是的，我收到错误，例如无法加载资源：localhost:4200/New-Google-Logo.png
图片是否在正确的文件夹中？是png吗？
@Robert 我已经用文件夹树编辑了问题，如果我错了，请看看并纠正我。

标签： html css angular

【解决方案1】：

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

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

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

把你所有的静态资源放在 angular-cli 默认使用 .angular-cli.json 的 assets 文件夹中
或者您需要在名为 assets 的数组中的 .angular-cli.json 文件中输入静态资产文件夹，因为我的图像文件夹位于静态文件夹中，而静态文件夹与资产文件夹的层次结构级别相同
```
"assets": [ "assets", "static/images" ]
```

【讨论】：

我正在使用 Angular cli，但没有使用资产。它是强制性的吗？就像我几天前使用同一个项目一样，一切正常。今天我重新安装了cli，然后开始出现这个问题。请指导我如何纠正。谢谢
当您为项目提供服务时，所有静态资产都需要提供给客户端，以便在客户端显示。 Angular cli 在 js 文件中构建和捆绑整个项目。要为您的静态资产提供服务，您可以采用两种方式 - 将所有静态资产放在 angular-cli 默认使用 .angular-cli.json 提供的资产文件夹中 - 或者您需要在 .angular-cli 中输入静态资产文件夹。 json 文件在名为 assets 的数组中，因为我的图像文件夹位于静态文件夹中，静态文件夹与 assets 文件夹“assets”的层次结构相同：[“assets”，“static/images”]
我尝试在 logincomponent 文件夹中创建一个名为 images 的文件夹并将图像放在那里并尝试过，但没有运气。之后它看起来就像我在问题的 try 2 部分中添加的那样。
为了提供来自不同文件夹的静态内容，您需要将该文件夹的路径添加到 .angular-cli.json 的 assets 数组中，并且不要在 src 中提供相对路径。在您的情况下，只需将其命名为 <div> <img src="Images/New-Google-Logo.png"/> </div> 并添加 "assets": [ "assets", "logincomponent/Images" ]
查看此链接以供参考github.com/angular/angular-cli/wiki/stories-asset-configuration

【解决方案2】：

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

【讨论】：

【解决方案3】：

改变路径

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

并添加高度和宽度

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

【讨论】：

【解决方案4】：

如果您的 css 文件中有这样的引用，其中引用的图像如下所示

    .topmenu a:hover {
    background:url('../images/topm_bg_right.gif') right top no-repeat;
    color:#fff;
   }
 then you may have to add the image extension wild cards in the permit all list of your 
 WebSecurityConfig class as shown.. especially when you have bundled your app with both angular and spring boot together ng build and moved to the static folder

 .antMatchers("/","/*.jpg","/*.png",
                    "/home","/assets/**",
                    "/polyfills.js",).permitAll()

【讨论】：