Question

我的项目中有这个目录。应用程序运行正常，我删除了以下结构中的任何不相关的目录。

e2e
node_modules
src
 |--app
      |--app.component.css   <--Image is not loaded at all
      |--app.component.ts
      |--app.component.html  <--Html can load image correctly
 |--assets
      |--images
           |--play.png       <--What I want in css
.angular-cli.json

我确认可以使用以下语法从HTML文件加载图像：

HTML file

<img src="/assets/images/play.png" alt="">

<!-- This will load image from css -->
<div class="sample-image"></div>

CSS file

.sample-image {
  /* Not working at all*/
  /* Url I've tried: /assets, ../assets, ./assets, ../images */
  background-image: url(/assets/images/play.png);
  background-color: #cccccc;
  width: 200px;
  height: 100px;
}

我可以告诉图片应该加载到哪里，因为我将背景颜色显示出它应该在哪里。

我已经检查了Github page以查看它是否相关，但对我来说，即使在使用ng serve进行开发时，它似乎也无效。我还没有尝试过它。

更新：我很抱歉描述了错误的目录结构，我的眼睛专注于src文件夹，我忘了应用程序，资产在src中。我已经更新了它。

UPDATE 2 ：这是一个angular-cli json文件。当我用ng命令创建项目时，我记得没有被篡改过：

  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],

Answer 1

查看angular-cli.json配置

{
  "root": "src",
  "outDir": "dist",
  "assets": [
    "assets",
    "favicon.ico"
  ],
  ....
}

您有 src作为根文件夹，资产文件夹位于应用内。在src。中移动assets文件夹。

更新1：基于新目录结构

删除src网址中资产的前面

<img src="assets/images/play.png" alt="">

Answer 2

除了一个愚蠢的错误外，似乎一切都运转良好。

图像本身。

play.png

在我做任何其他事情之前应该检查图像。结果图像大于我在css中指定的宽度，而后者则显示图像的transparent area。

更改为其他图像有助于我找到此问题。

Answer 3

在app.component.css中，使用图像的相对网址。对于给定方案，请按如下方式设置css：

.sample-image {
  background-image: url('../assets/images/play.png');
  background-color: #cccccc;
  width: 200px;
  height: 100px;
}

请勿忘记网址中的引号。

Angular CLI：CSS不会从资产

3 个答案: