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服务Angular应用时，组件css中配置的背景图片不考虑相对路径

2 个答案: