当ng服务于角度应用时，不考虑组件css中配置的背景图像的相对路径 [英] Relative path is not considered for background image configured in component css when ng serve Angular app

问题描述

我有两个div，iddiv1和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)-没有相对路径，因此两者在背景中显示相同的图像。

问题：

这是ANGLE的预期行为吗？如果不是，我在这里遗漏了什么？

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

这篇关于当ng服务于角度应用时，不考虑组件css中配置的背景图像的相对路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！