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文件中构建并捆绑整个项目。要为您的静态资产提供服务，您可以采用以下两种方式

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

Answer 2

如果使用CLI创建项目，则将只有一个素材资源文件夹，只需在其中创建一个图片文件夹，然后将所有图片粘贴为.png类型，然后输入
在html内引用src =“ assets / images / AnyImage.png”它将加载图像。实际上，您将图像粘贴在loginComponent文件夹中。试试这个会起作用。

Answer 3

将路径更改为

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

并添加高度和宽度

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

Answer 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()

未在Angular 2中加载的图像

4 个答案: