当 ng serve Angular app 时，组件 css 中配置的背景图片不考虑相对路径

Question

我有两个 div，id 为 div1 和 div2，我需要为它们设置 两个不同的背景图像 ，图像具有相同的名称但位于不同的文件夹中，所以我配置如下，

app.component.html :

<div id="div1"></div>
<div id="div2"></div>

app.component.css:

background-image 每个 div.

的路径不同

#div1 {
  background-image: url('../assets/images/videos/back.jpg');
  /* other styles */
}

#div2 {
  background-image: url('../assets/images/blogs/back.jpg');
   /* other styles */
}

问题：

当我使用 ng serve 为应用程序提供服务时，div 显示相同的背景图片。

请注意两个图像的路径不同但名称相同

原因：

在浏览器的开发者工具中勾选，样式如下，

#div1 [_ngcontent-c0] {
    background-image: url(back.jpg);
    /* other styles */
}

#div2 [_ngcontent-c0] {
        background-image: url(back.jpg);
        /* other styles */
}

那是 url('../assets/images/blogs/back.jpg') 而不是 url(back.jpg) - 没有相对路径，因此两者在背景中显示相同的图像。

问题：

这是 angular 的预期行为吗？如果不是我在这里错过了什么？

Answer 1

CSS 中的相对路径应该相对于基础 URL，而不是相对于 src 目录中的组件。因此，从路径中删除前导 ..，但确保您有前导斜杠：

#div1 {
  background-image: url('/assets/images/videos/back.jpg');
}

#div2 {
  background-image: url('/assets/images/blogs/back.jpg');
}

根据实验，我可以看到当使用相对于源代码的路径时，CLI 会创建引用图像的副本并将其放在 dist 文件夹的根目录下。这导致 dist 文件夹如下所示：

/dist
  // This is the image that the CLI created 
  // and your component is referencing, but 
  // you want to reference the images in the
  // assets folder.
  back.jpg
  /assets
      /images
          /videos
              back.jpg
          /blogs
              back.jpg

Answer 2

我必须做一个内联样式才能工作

<section id="hero" style="background-image: url(./assets/pic.jpg)">

当 ng serve Angular app 时，组件 css 中配置的背景图片不考虑相对路径

Relative path is not considered for background image configured in component css when ng serve Angular app

html

css

background-image

node.js

angular