使用Angular CLI并且无法在CSS文件中使用相对图像路径

Question

使用角度CLI设置了一个角度应用程序,并创建了一个在components目录中包含图像的组件.

例如:

app/
---/common-components
------/header
---------/header.component.ts
---------/header.component.css
---------/images
--------------/image.png

在CSS文件中我使用以下样式:

.image {
    background-url: url('images/image.png');
}

当我运行应用程序时,它给了我一个304 Not Modified并且图像没有显示在预览中.如果我使用绝对路径'/ src/app/common-components/header/images',文件会正确加载.然而,这并不理想,因为我希望该组件能够自给自足.

给出的答复是:

Request URL:http://localhost:4201/images/test-image.jpeg
Request Method:GET
Status Code:304 Not Modified
Remote Address:127.0.0.1:4201

预览空白

Answer 1

所有静态资产文件/目录都需要在angular-cli.json文件中列出.

添加资产

要添加资产,您可以:

• 将您的图像文件放在默认assets文件夹中(已在angular-cli.json文件中列出).
• 或者在里面添加一个新目录app/(例如在你可以使用的情况下app/images,然后引用它angular-cli.json)

角cli.json:

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

引用文件

如@贾利爱在评论中提到的background-url应该是background-image,你可以参考你的资产是这样的:

.image {
   background-image: url('images/image.png'); 
}

以下是angular-cli.json文件和对资产的引用的示例