【问题标题】：Using Angular CLI and unable to use relative image paths in CSS files使用 Angular CLI 并且无法在 CSS 文件中使用相对图像路径
【发布时间】：2017-04-06 11:19:36
【问题描述】：

已经使用 Angular CLI 设置了一个 Angular 应用程序，并在组件目录中创建了一个包含图像的组件。

例如：

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

带有空白预览

【问题讨论】：

您是否尝试像 url('./images/image.png') 那样加载图像？
@nicowernli 是的，我也试过了，但没有成功。
css 属性是background-image 不是background-url
@jali-ai 已更改，但这并不能解决问题。

标签： angular webpack angular-cli

【解决方案1】：

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

添加资产

要添加资产，您可以：

将您的图像文件放在默认的assets 文件夹中（该文件夹已在angular-cli.json 文件中列出。
或者在app/ 中添加一个新目录（例如，在您的情况下，您可以使用app/images，然后在angular-cli.json 中引用它）

angular-cli.json:

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

引用文件

就像 cmets 中提到的 @jali-ai background-url 应该是 background-image 并且您可以这样引用您的资产：

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

以下是资产的angular-cli.json file 和reference 示例

【讨论】：

您是在暗示 OP 的意图是不可能的吗？即具有组件的“本地”图像？我能够使用 SystemJS 作为捆绑器来完成它。这可能被认为是不正确的 Angular2 组件组合吗？
我一直在使用 webpack 并没有找到完整的解决方案，这使得创建可重用组件变得更加困难。你可以在你的 CSS 中内联 SVG，但我通常只是把所有东西都放在一个 assets 文件夹中。这是一个相关问题：#6637
如果您希望自己的模块目录包含资产，您可以添加资产文件夹模式，例如 '**/images/*.png'
我用 'less' 尝试了同样的方法，但它不起作用。
资产列表与解析文件无关。它用于在构建时直接复制文件。 github.com/angular/angular-cli/blob/master/docs/documentation/… 您的背景图片链接有效，因为您的图片文件夹位于您的应用根目录 (src) 中

【解决方案2】：

angular-CLI 和 webpack（使用 1.0.3）似乎仍然是个问题。

如果将asset文件夹添加到angular-cli.json并相对定义路径，构建仍然失败，找不到资源url('someRelativeLink')。

我使用了一种解决方法并将所有 CSS 定义放入：

@Component({
  styles: [...]
})

而不是styleUrls 文件。

做了之后一切都很好。

【讨论】：

【解决方案3】：

您可以使用插入符号语法来忽略 url 处理

background-image: url('^images/objects/loader.png');

Angular CLI 只是通过你的 url 删除 Caret

background-image: url('images/objects/loader.png');

【讨论】：

【解决方案4】：

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

【讨论】：