html - 当 ng 服务 Angular 应用程序时，在组件 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