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

Question

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

例如：

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中提到的@ jali-ai应为background-image，您可以像这样引用您的资源：

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

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

的示例

Answer 2

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

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

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

中

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

而不是styleUrls文件。

在doinig之后，一切都很好。

Answer 3

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

Route::get('appraisal_goals/manager_employee_goal/{id?}', 'Appraisal\AppraisalGoalsController@manager_employee_goal')->name('appraisal.appraisal_goals.manager_employee_goal');
Route::get('appraisal_goals/manager_employee_goal_list/{id?}', 'Appraisal\AppraisalGoalsController@manager_employee_goal_list')->name('appraisal.appraisal_goals.manager_employee_goal_list');

Angular CLI只是通过您的网址删除了插入符号

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

Answer 4

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